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 =＆＃34; true＆＃34;。

<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>

Answer 2

此处使用的正确角色是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 3

经过一天的类似问题摆弄，我终于可以通过大量的阅读和实验来使它工作。我正在使用NVDA作为屏幕阅读器。

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

以下属性是关键：角色和 aria-label 。上面的示例在isLoading变为true时使NVDA宣布“正在加载警报”。需要注意的重要一点是NVDA会发出aria标签值，后跟“ alert”。使用角色“ log”或“ status”并没有在任何公告中结束。

Answer 4

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

原因是因为某些页面可能有很多单独的加载器（假设每个组件一个，而不是整个页面的一个加载器），并且使用aria-live="assertive"或role="alert"这将非常具有侵入性，每个装载机都会被召唤出来。

Answer 5

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

微调器应放在容器内。可以相对于aria-busy属性切换其可见性。它们应该始终相反，即，如果当前正在加载，则section [aria-busy =“ true”] 、. tn-spinner [aria-hidden =“ false”]，一旦加载了内容，则分别切换为false和true。

Answer 6

Bootstrap使用 role =“ status” 就像这样：

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

在MDN中说：

状态角色是一种活动区域和一个容器，其内容是用户的咨询信息，其重要性不足以为警报辩护，通常显示为状态栏。当。。。的时候角色添加到元素后，浏览器将发出可访问的信息辅助技术产品的状态事件，然后可以通知用户。

Answer 7

您是否尝试在跨度上使用role="alertdialog" aria-busy="true"？

Answer 8

请注意，此组合How do you make the Loading icon accessible for screen-readers like JAWS?已在此处回答： role =“alertdialog”aria-busy =“true”aria-live =“assertive”

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

8 个答案: