可访问的隐藏文件输入

Question

我正在尝试找出替换 <input type='file' /> 的方法，并使其替换可访问，就像提到的输入本身一样。

问题是：我可以同时使用，还是type='file'辅助功能键的键？

我的做法：

我基本上告诉浏览器忘记 type='file' 的存在 CSS:

input[type=file] {
    display: none;
    visibility: hidden;
    opacity: 0;
    height: 0;
    width: 0;
    position: absolute;
    top: -9999px;
}

准备好替换：

<input type='file' />
<label for="file">Upload your file</label>
<input type='text' id='file' />

用一些漂亮的 CSS 修复了 OS' 样式并添加了 JS (jQuery) 代码来处理文件浏览器显示：

$("#file").on("focus", function(ev) {
    $(this).siblings("[type='file']").first().focus();
});

并处理了文件输入的上传，因此它显示文件名并执行浏览器阻止的其他很酷的事情。

我是否需要添加一些额外的 aria 属性以使其更具描述性？例如，我是否应该通过设置 tabindex="-1" 来防止使用选项卡选择 type='file'，这样需要访问的人在连续两次打开文件浏览器时不会感到困惑时间短？我应该在 <label> 元素上添加 id='file-label' 并在 type='file' 上添加 aria-describbedby='file-label' 吗？还是我应该放弃一切并使用肮脏的标准 type='file'?

Answer 1

There's no corresponding role in ARIA 用于 input[file] 标签。您正在使用五种不同的方式来隐藏 input[file] 元素（display:none、visibility: hidden、opacity:0、width=0;height=0 和屏幕外定位），这太过分了tabindex=-1 在 display:none 元素上无效...

依我拙见，最好将 input[file] 替换为 button，因为此按钮会触发点击隐藏的 input[file]。

input[text] 会在屏幕上发出奇怪的通知 reader。

当然，在完成选择后修改 button 文本以指定所选文件可能是一件好事。

可访问的隐藏文件输入

Accessible hidden file input

html

accessibility

input

wai-aria