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

Posted 2023-05-07

【中文标题】如何为 WAI-ARIA 标记加载动画？

【英文标题】：How to label a loading animation for WAI-ARIA?

【发布时间】：2016-12-06 20:46:30

【问题描述】：

我正在努力解决网页上的一些可访问性问题。我有一个充当对话框的 div，在其中一个 div 包含加载动画和显示文本“Working...”。

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

<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 出现时（通过更改显示样式属性），它正确读取“正在工作...”但我没有听到任何迹象表明它很忙并且用户应该等待，我错过了什么吗？

我已经到处寻找加载动画的示例，但到目前为止无济于事。

注意：我使用NVDA 作为屏幕阅读器进行测试。

谢谢

【问题讨论】：

你有测试的网址吗？就目前而言，屏幕阅读器正在宣布您提供的文本，但听起来您希望它说的不止这些。

我希望它宣布它正在工作，以指示用户他应该等待，警报项目上的 aria-busy 似乎已经成功了。

后续问题：一旦加载操作完成，如何宣布新数据？

【参考方案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"  />
</div>

【参考方案2】：

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

这样做的原因是因为某些页面可能有很多单独的加载器（假设每个组件一个加载器，而不是整个页面的单个加载器）并且您使用 aria-live="assertive" 或 role="alert" 它会非常侵入性，每个加载程序都会被调用。

【参考方案3】：

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

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

如果您希望文本与警报相同，则应使用aria-live="assertive" 而不是alert 角色。 aria-live 值是导致屏幕阅读器在发出警报时宣布文本的原因。 应使用aria-valuetext 属性在具有progressbar 角色的元素上设置要宣布的文本。它不应单独设置在单独的相邻元素上。如果出于演示原因还需要将其包含在另一个元素中，则该元素应具有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"  />
</div>

【讨论】：

当加载器因网络请求而显示时，您将如何处理最小值和最大值？如果你像上面那样使用它，那么它总是会说“0%”，如果你把它们都拿出来，它会说“工作未确定”

如果您知道实际进度，您应该在下载时设置并更新aria-valuenow 到适当的数量。如果您不知道实际进度，那么将min 和max 排除在外可能是避免您所描述的现实世界行为的最佳选择，尽管这在技术上与规范相反。在未知进展的情况下让它说“工作未确定”是准确的。 （请注意，我无法重现您所描述的内容，因为我不知道您正在使用什么软件进行测试。）

【参考方案4】：

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

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

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

【参考方案5】：

我遇到了一篇很好的文章，它解释了在这种情况下需要做什么Loading spinner accessibility

微调器应包含在容器内。它的可见性可以根据 aria-busy 属性进行切换。它们应该总是相反的，即，如果当前正在加载，section[aria-busy="true"], .tn-spinner[aria-hidden="false"]，一旦内容被加载，分别切换到 false 和 true。

【参考方案6】：

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

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

在MDN 中它说：

状态角色是一种活动区域和一个容器，其内容 是对用户来说不够重要的咨询信息 证明警报的合理性，并且通常显示为状态栏。当。。。的时候 角色被添加到一个元素，浏览器将发送一个可访问的 辅助技术产品的状态事件，然后可以通知 用户对此的看法。