如何为 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>

我尝试将 role 和 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 值是导致屏幕阅读器在发出警报时读出文本的原因。
要宣布的文本应使用 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" alt="" />
</div>

Answer 4

经过一天摆弄类似的问题后，通过大量阅读和试验，我终于能够解决这个问题。我在屏幕上使用 NVDA reader。

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

以下属性是关键：role 和 aria-label。上面的例子让 NVDA 在 isLoading 变为真时宣布 "Loading alert"。需要注意的重要一点是，NVDA 发音为 aria-label 值，后跟 "alert"。使用角色 "log" 或 "status" 没有在任何公告中结束。

Answer 5

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

The spinner should be included inside the container. Its visibility can be toggled in relation to the aria-busy attribute. They should always be opposites, i.e, if currently loading, section[aria-busy="true"], .tn-spinner[aria-hidden="false"], once the content is loaded, toggle to false and true respectively.

Answer 6

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

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

在MDN中它说：

The status role is a type of live region and a container whose content is advisory information for the user that is not important enough to justify an alert, and is often presented as a status bar. When the role is added to an element, the browser will send out an accessible status event to assistive technology products which can then notify the user about it.

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

How to label a loading animation for WAI-ARIA?

html

accessibility

wai-aria