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

Question

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

我想为 "choose file" 部分添加 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

I would like to add wai-aria attribute for "choose file" part to make it readable

你能详细解释一下吗？

当使用原生html（比如<input type="file">）时，你会得到很多内置的辅助功能。浏览器知道如何通过辅助功能API，从而允许屏幕 reader 正确宣布元素的名称、角色和值。所以默认是"readable"。

但是，如果您正在谈论进度指示器并希望在文件加载时传达文件上传的进度，则必须使用 aria-live. There's a good example on Progress Bar with ARIA Live Regions

来实现

Answer 2

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

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

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

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

Answer 3

这对我有用，我不确定它是否 100% 符合 ARIA，因为屏幕阅读器将使用按钮代替文件输入。但是，根据我的测试，这适用于 Mac 的 VoiceOver 和标签导航。

<label
  tabindex="0"
  for="fileupload"
  role="button"
  onkeyup="if (event.keyCode === 13 || event.keyCode === 32) { this.click(); }"
  >
  Upload an Image
</label>
<input
  name="inputname"
  type="file"
  id="fileupload"
  accept="image/jpeg, image/png, image/gif"
  aria-hidden="true"
  tabindex="-1"
  />

说明

tabindex="0" 标签通常不能通过制表符聚焦，这使得 tab-focusable.

role="button" 通知屏幕阅读器将此标签视为按钮。标签在没有 role 的情况下仍然有效，但使用 role 屏幕阅读器可以告诉用户如何与按钮交互。

for="fileupload" 这就是魔法发生的地方。如果您选择按钮（标签）并按下回车键，或者在屏幕阅读器中执行相同操作，for 会将事件发送到文件输入元素。

onkeyup 这是tab导航的一个方便的东西。默认情况下，按 enter (13) 或 space (32) 不会执行任何操作。

aria-hidden="true" 默认情况下，屏幕阅读器会尝试同时关注标签和输入，这对用户来说是多余的。告诉屏幕阅读器忽略输入。为什么要这样做？当屏幕阅读器聚焦标签时，它可以更轻松地向标签添加 CSS 焦点状态。（相对于屏幕阅读器聚焦文件输入，并尝试根据另一个元素的聚焦状态更新标签样式）

tabindex="-1" 告诉选项卡导航也忽略 <input>。

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

How to add wai-aria property for file picker?

html

javascript

filepicker

wai-aria

说明