如何为WAI-ARIA标记加载动画？

Question

我正在努力修复网页上的一些辅助功能问题.我有一个div作为一个对话框,在一个点内部显示一个包含加载动画和文本"Working ..."的div.

我不确定如何标记这两个项目,以便正确通知盲人用户有进度动画并且它正在工作,他应该等待.

<div id="loading" style="display: none;">
        <div class="mgBot15"><span class="txt16" role="alert">Working...</span></div>
        <img src="loading.png" role="progressbar" aria-busy="true"/>
    </div>

我尝试将角色和aria-busy属性添加到img(最初也是父div).

当这个div出现时(通过更改显示样式属性),它正确读取"Working ..."但我没有听到任何迹象表明它正忙,用户应该等待,我错过了什么？

我已经看了很多关于加载动画的例子,到目前为止无济于事.

注意:我正在使用NVDA作为屏幕阅读器进行测试.

谢谢

Answer 1

我能提出的最佳解决方案是使用角色警报,并使用aria-busy ="true".

<div id="loading" style="display: none;">
    <div class="mgBot15"><span class="txt16" role="alert" aria-busy="true">Working...</span></div>
    <img src="loading.png" alt="loading" />
</div>

Answer 2

我相信最明智的方法是使用组合 aria-busy="true" aria-live="polite"

其原因是因为某些页面可能有很多独立的装载机（假设为每个组件，而不是整个页面的单一装载机），它使用aria-live="assertive"或者role="alert"这将是非常侵入和各装载机将调用出去。

Answer 3

此处使用的正确角色与使用progressbar的原始问题相同。其他角色alert可能会起作用，但它们不太具体，这意味着辅助技术可能会以不太理想的方式呈现信息。

但是，原始问题的示例存在一些问题：

• 如果您希望在与警报相同的情况下宣布文本，aria-live="assertive"则应使用而不是alert角色。该aria-live值是导致屏幕阅读器在发出警报时宣布文本的原因。
• 要宣布的文本应progressbar使用aria-valuetext属性设置在具有角色的元素上。它不应单独设置在单独的相邻元素上。如果出于演示原因还需要将其包含在另一个元素中，则该元素应具有aria-hidden="true".
• 每规范，aria-valuemin并aria-valuemax要指定即使进度是不确定的（像旋转负载指示）。这些可以分别设置为 0 和 100 作为表示百分比的简单占位符。

加载完成后，aria-valuenow可以将 设置为用于 的任何内容aria-valuemax，并且aria-busy可以设置为false。

这导致了原始问题的一种潜在替代方案：

<div id="loading" role="progressbar" aria-valuetext="Working…" aria-busy="true"
    aria-live="assertive" aria-valuemin="0" aria-valuemax="100">
    <div class="mgBot15" aria-hidden="true"><span class="txt16">Working...</span></div>
    <img src="loading.png" alt="" />
</div>

Answer 4

经过一天的类似问题的摆弄之后，我终于能够通过大量的阅读和实验来解决这个问题。我正在使用 NVDA 作为屏幕阅读器。

<div class="loader" show.bind="isLoading" role="alert" aria-label="Loading"></div>

以下属性是关键：role和aria-label。上面的示例使 NVDA 在 isLoading 变为 true 时宣布“正在加载警报”。需要注意的是，NVDA 发音 aria-label 值，后跟“alert”。使用角色“日志”或“状态”并没有出现在任何公告中。

Answer 5

Bootstrap使用role="status"像这样：

<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>

MDN中写道：

状态角色是一种活动区域和容器，其内容是针对用户的咨询信息，其重要性不足以证明警报的合理性，并且通常以状态栏的形式呈现。当角色添加到元素时，浏览器将向辅助技术产品发送可访问状态事件，然后辅助技术产品可以通知用户。