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属性才能使其更具描述性？例如，我应该通过设置type='file'来阻止通过标签选择tabindex="-1"，因此在连续两次打开文件浏览器时，可访问人员不会感到困惑时间很短？我应该在id='file-label'元素和<label> aria-describbedby='file-label'上添加type='file'吗？或者我应该全部放弃并使用污秽的标准type='file'？

Answer 1

<{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]文本以指定所选文件可能是件好事。

可访问的隐藏文件输入

1 个答案: