如何使屏幕阅读器（如JAWS）能够访问“正在加载”图标？

Question

所以 HTML 代码如下：

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

尽管提供了ALT文本，但当样式更改以显示图标（visibility：visible）时，在加载图标出现的时间间隙中不会读取它。

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

- KannarKK

---

https://dev59.com/3a_la4cB1Zd3GeqPtn2G - Ruchit goswami

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

- Kevin Damen

---

如果只有在加载时间过长时才需要读取消息，该怎么办？如何在不使用 AJAX 的情况下进行轮询？ - KannarKK

请提供为什么我们应该添加所有这些属性的解释或来源。 - Ralph David Abernathy

应该使用role=alert而不是role=alertdialog。根据MDN文档，“与常规警报不同，警报对话框必须至少有一个可聚焦的控件，并且在警报对话框出现时必须将焦点移动到该控件上。”https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role。 同时，使用role=alert已经默认设置了aria-live=assertive，因此不需要额外设置。 - Justin Kahn

你应该同时使用aria-live="assertive"和role="alert"，因为读者支持其中之一。同时使用两者可以提供额外的保护。 - Schw2iizer

为什么这里使用aria-busy？根据MDN，aria-busy状态表示元素正在被修改，辅助技术可能希望在通知用户更新之前等待更改完成。在这里，我们不需要等待加载程序完成加载，而是有兴趣告知用户我们目前正在加载某些内容。 - Ankit Choudhary

@AnkitChoudhary是正确的。aria-busy属性不是用于加载内容中的状态，而是用于指示辅助技术软件，应忽略应用该属性的内容，因为它正在动态更新过程中，并且在准备就绪之前应被忽略。然而，似乎很少有屏幕阅读器实际尊重aria-busy属性。https://www.tpgi.com/short-note-on-being-busy/ - Jon Gibbins

Answer 2

在一整天的研究和实验后，我终于成功解决了类似的问题。我使用NVDA作为屏幕阅读器。

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

以下属性是关键的：role 和 aria-label。 上面的示例使得当isLoading变为true时，NVDA会宣布“Loading alert”。需要注意的是，NVDA会发音aria-label的值，然后是“alert”。使用“log”或“status”角色不会有任何公告。

- Asen Tahchiyski

---

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