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

Question

我正在努力解决网页上的一些无障碍问题。我有一个作为对话框的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>

我尝试将role和aria-busy属性添加到图片上（最初也添加到了父div中）。

当这个div出现时（通过更改display样式属性），它正确地读取“正在工作...”，但我没有听到任何指示表明它正在忙碌，用户需要等待，我有什么遗漏吗？

我已经搜索了所有的加载动画示例，但迄今为止没有找到。

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

谢谢

- SoManyGoblins

---

你有测试用的URL吗？目前屏幕阅读器正在宣读您提供的文本，但似乎您希望它说得更多。 - aardrian

我希望它能够宣布它正在工作，提示用户等待，警报项上的aria-busy似乎解决了这个问题。 - SoManyGoblins

跟进问题：一旦加载操作完成，您如何宣布新数据？ - Benjin

Answer 1

我能想到的最好的解决方案是使用 role="alert" 和 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>

- SoManyGoblins

Answer 2

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

原因在于一些页面可能有许多单独的加载器（比如说为每个组件设置一个，而不是整个页面只有一个加载器），如果使用aria-live="assertive"或者role="alert", 将会非常麻烦并且每个加载器都会被调用出来。

- c_lejeune

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>

- Scott Buchanan

---

当加载器作为网络请求的结果而显示时，您将如何处理最小值和最大值？如果像上面那样使用它，则始终会显示“0％”，如果完全拿出它们，它会显示类似“正在进行的工作未确定”的内容。 - L-R

如果您知道实际进度，应该在下载时设置和更新aria-valuenow到适当的数量。如果您不知道实际进度，则可能最好将min和max排除在外，以避免您所描述的真实世界行为，尽管这从技术上讲与规范相反。在未知进度的情况下，让它说“正在工作，进度未确定”是准确的。（请注意，由于我不知道您正在测试哪个软件，因此无法重现您所描述的情况。） - Scott Buchanan

Answer 4

经过一天的尝试和摸索，我终于通过了阅读和实验的方式解决了类似的问题。我正在使用NVDA作为屏幕阅读器。

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

以下属性是关键点: role 和 aria-label。 以上示例使NVDA在isLoading变为true后宣布“正在加载警告”。需要注意的是，NVDA会发音 aria-label 的值，然后是“警告”。使用角色“log”或“status”没有任何通报。

- Asen Tahchiyski

---

show.bind和"isLoading"是什么？这是Angular或类似的框架吗？该问题被标记为“HTML”。 - targumon

show.bind是Aurelia框架中使用的绑定属性，类似于Angular中的*ngIf指令。isLoading是视图模型中的布尔变量。 - Asen Tahchiyski

Answer 5

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

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

在 MDN 上提到：

状态角色是一种活动区域和容器，其内容为向用户提供的建议性信息，这些信息不足以引起警报，并且通常作为状态栏呈现。当将该角色添加到元素时，浏览器将发送可访问状态事件到协助技术产品中，然后协助技术可以通知用户相关信息。

- MBehtemam

---

当使用加载器等待主内容时，我认为这不是正确的角色。在MDN的同一页中，它指出：“实时区域旨在通知用户有关当前网页的其他区域中发生的动态更新，但这些更新不需要通过更改上下文来打断用户当前的活动。” - Floris Groenendijk

Answer 6

我看到了一篇很好的文章，解释了针对这种情况需要做什么 加载旋转图标可访问性

旋转图标应该包含在容器内。可以通过与aria-busy属性相关联来切换其可见性。它们应始终是相反的,即如果当前正在加载，则section[aria-busy="true"], .tn-spinner[aria-hidden="false"]，一旦内容被加载，分别切换为false和true。

- blankface

---

链接已失效，这里似乎是文章的复制版本：https://docs-button-fix--fundamenta-temp.netlify.app/components/loading-spinner.html - James Jenkinson