如何使JAWS等屏幕阅读器可以访问“正在加载”图标？

Question

如何使JAWS等屏幕阅读器可以访问“正在加载”图标？

因此，HTML代码是这样的：

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

Run Code Online (Sandbox Code Playgroud)

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

角色=警报不是可行的解决方案，因为这不是警报

Answer 1

小智 5

您需要在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>

Run Code Online (Sandbox Code Playgroud)

请提供一个解释或来源，说明为什么我们应该添加所有这些属性。 (2认同)
它应该是“role=alert”而不是“role=alertdialog”。来自 MDN 文档“与常规警报不同，警报对话框必须至少有一个可聚焦的控件，并且在出现警报对话框时必须将焦点移到该控件上” https://developer.mozilla.org/en-US/docs/Web /Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role. 也没有必要使用 `aria-live=assertive`，因为这是通过使用 `role=alert` 设置的 (2认同)
为什么这里使用 aria-busy ？根据 MDN 的说法，aria-busy 状态表示某个元素正在被修改，辅助技术可能需要等到更改完成后再通知用户更新。在这里，我们不需要等待加载器完成加载，而是有兴趣通知用户我们目前正在加载某些内容。 (2认同)

归档时间：	10 年，5 月前
查看次数：	3421 次
最近记录：	10 年，4 月前