如何在不透明度设置为0的元素上进行tabindex

debugcn 发表于 Dev

伊桑·弗兰森

我有一个拖放图像上传字段，在该字段中，我将输入字段设置为不透明度0，因此没有显示上传按钮，因此我可以对其进行样式设置以使其适合模型。但是，我试图通过在用户按下Enter键时触发上载功能来解决可访问性问题。

我遇到的问题是，因为当我将其不透明时将其设置为0，所以它不会使元素聚焦。我仍然可以按Enter键来上传文件，效果很好，但是没有指示器让用户知道该选项在那里。

是否有补救的好方法？

这是我正在做的一个小例子：

HTML：

<div class="imageUploader">
    <input class="upload" type="file" accept="image/*">
    <p class="text"> Drop your photo here or upload a file</p>
</div>

CSS：

.imageUploader {
    width: 120px;
    height: 122px;
    background-color: #F4F6FC;
    display: inline-block;
    border-radius: 100px;
    vertical-align: bottom;
    text-align: center;
    position: relative;
}
.image {
    opacity:0;
    width: 100%
    height: 120px;
    cursor: pointer;
    position: absolute;
    left: 0;
} 

.text {
    position: absolute;
    top: 30%;
    font-size: 14px;
}

马克斯·雅各布森

这应该允许您单击带有文本的自定义圆圈以打开文件输入。它还允许您使用Tab键查看它，并显示视觉提示以指示该元素已聚焦。

.imageUploader {
    width: 120px;
    height: 122px;
    background-color: #F4F6FC;
    border-radius: 100px;
    text-align: center;
    font-size: 14px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
}

.upload {
  opacity: 0;
  position: absolute;
  width: 122px;
  height: 122px;
  border-radius: 100px;
}

.upload:focus + .imageUploader {
     border:1px solid #4D90FE;
}

<div>
    <input id="inputID" class="upload" type="file" accept="image/*">
    <label for="inputID" class="imageUploader">Drop your photo here or upload a file</label>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。