如何为文件选择器添加 wai-aria 属性？

Question

我目前正在关注本教程以获得文件选择器功能。 http://www.alecjacobson.com/weblog/?p=1645

我想为“选择文件”部分添加 wai-aria 属性以使其可读。 我曾尝试使用 aria-controls 和 tabindex 但当我模拟一些验证器时无法得到任何积极的回应..知道吗？

<body>
    <input id="file" type="file" multiple onchange="startRead()">
    <h3>Progress:</h3>
    <div style="width:100%;height:20px;border:1px solid black;">
    <div id="bar" style="background-color:#45F;width:0px;height:20px;"></div>
    </div>
    <h3>File contents:</h3>
    <pre>
        <code id="output">
        </code>
    </pre>
</body>

Answer 1

我想为“选择文件”部分添加 wai-aria 属性以使其可读

你能解释一下吗？

使用原生 html（例如<input type="file"> ）时，您会获得很多内置的辅助功能。浏览器知道如何通过辅助功能 API 显示原生 html 元素，从而允许屏幕阅读器正确地读出名称、角色和元素的值。 所以默认情况下它将是“可读的”。

但是，如果您正在谈论进度指示器并希望在文件加载时传达文件上传的进度，则必须使用aria-live来做到这一点。 带有 ARIA Live Regions 的 Progress Bar有一个很好的例子

Answer 2

现代浏览器将input控件的file类型识别为几种不同的“类型”（标签、输入或通用对象）之一，并带有一个按钮作为附加的伪元素。 但出于可访问性目的，我认为将其标识为屏幕阅读器的按钮是安全的，因为它是交互式使用的。

因此，我会将以下WAI-ARIA属性添加到您的input控件file类型中：

    <input id="fileupload" type="file" role="button" aria-label="File Upload" />

如果您的屏幕阅读器社区对此感到困惑，那么“role=textbox”将是我的第二个选择。

如何为文件选择器添加 wai-aria 属性？

问题描述

2 个解决方案

解决方案1
2 2019-03-05 17:15:47

解决方案2
1 已采纳 2021-01-30 17:36:54

如何为文件选择器添加 wai-aria 属性？

问题描述

2 个解决方案

解决方案1 2 2019-03-05 17:15:47

解决方案2 1 已采纳 2021-01-30 17:36:54

解决方案1
2 2019-03-05 17:15:47

解决方案2
1 已采纳 2021-01-30 17:36:54