如何让 JAWS 等屏幕阅读器可以访问加载图标？答案

【问题标题】：How do you make the Loading icon accessible for screen-readers like JAWS?如何让 JAWS 等屏幕阅读器可以访问加载图标？
【发布时间】：2015-07-30 06:19:22
【问题描述】：

所以 HTML 代码是这样的：

<div style="visibility: hidden; display: none; right: 0px;"> 
<img id="processing" src="PT_LOADING.gif" alt="Processing... please wait" title=""> </div>

即使提供了 ALT 文本，但在更改样式以显示图标（可见性：可见）时，在加载图标出现的时间间隔内不会读取它。

role=alert 不是一个可行的解决方案，因为这不是警报

【问题讨论】：

stackoverflow.com/questions/53083628/…

标签： wai-aria jaws-screen-reader

【解决方案1】：

您需要将以下属性添加到您的 DIV 属性中 role="alertdialog" aria-busy="true" aria-live="assertive"

<div style="visibility: hidden; display: none; right: 0px;" role="alertdialog" aria-busy="true" aria-live="assertive"> 
<img id="processing" src="PT_LOADING.gif" alt="Processing... please wait" title="" />
</div>

【讨论】：

如果我只有在加载时间过长时才必须读出消息怎么办？如何在不使用 AJAX 的情况下进行投票？
请说明为什么我们应该添加所有这些属性。
它应该是role=alert 而不是role=alertdialog。来自 MDN 文档“与常规警报不同，警报对话框必须具有至少一个可聚焦控件，并且在出现警报对话框时必须将焦点移至该控件”developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/…。也不需要aria-live=assertive，因为这是使用role=alert设置的
您应该同时使用 aria-live="assertive" 和 role="alert" 因为读者支持其中一种。两者同时使用只会以这种方式提供额外的保护。
这里为什么使用aria-busy？根据 MDN，aria-busy 状态表示元素正在被修改，辅助技术可能希望等到更改完成后再通知用户更新。在这里，我们不需要等待加载器完成加载，而是有兴趣通知用户我们正在加载。

【解决方案2】：

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

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

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

【讨论】：

感谢分享。你是如何处理加载结束的，因为它永远不会被宣布？