时间戳

首页 > 解决方案 > 如何为文件选择器添加 wai-aria 属性？

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

问题描述

我目前正在关注本教程以获得文件选择器功能。 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>

标签： javascripthtmlwai-ariafilepicker

解决方案

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

你能解释一下吗？

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

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

推荐阅读