html - 如何为 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作为屏幕阅读器进行测试。

谢谢

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>