如何使“加载中”图标可供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文本，在更改样式以显示图标（可见性：可见）时，也不会在出现加载图标的时间间隔内读取它。

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

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>

Answer 2

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

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

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