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

Question

我正在努力解决网页上的一些可访问性问题。我有一个用作对话框的 div，并且在某一点内部显示了一个包含加载动画和文本“正在工作…”的 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>

我尝试将 role 和 aria-busy 属性添加到 img（最初也添加到父 div）。

当这个 div 出现时（通过更改显示样式属性），它正确地显示为“正在工作…”，但我没有听到任何迹象表明它很忙并且用户应该等待，我是不是错过了什么？

我已经到处寻找加载动画的示例，但到目前为止无济于事。

注意：我使用 NVDA 作为屏幕阅读器进行测试。

谢谢

原文由 SoManyGoblins 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我能想到的最佳解决方案是使用角色警报和 aria-busy=“true”。

 <div id="loading" style="display: none;">
    <div class="mgBot15"><span class="txt16" role="alert" aria-busy="true">Working...</span></div>
    <img src="loading.png" alt="loading" />
</div>

原文由 SoManyGoblins 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 c_lejeune 发布，翻译遵循 CC BY-SA 4.0 许可协议