如何标记WAI-ARIA的加载动画？ [英] How to label a loading animation for WAI-ARIA?

问题描述

我正在努力解决网页上的一些可访问性问题。我有一个用作对话框的div，并且在某个点上有一个div，其中包含加载动画和文本 Working ...。

I'm working on fixing some accessibility issues on a web page. I have this div that acts as a dialog, and inside at one point a div containing a loading animation and a text "Working..." is displayed.

我是不确定如何标记这两个项目，以便正确地通知盲人用户有进度动画并且正在工作，他应该等待。

I am unsure as to how to label these two items in order to correctly notify the blind user that there is a progress animation and that it's working and he should wait.

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

我尝试向img添加角色和aria-busy属性（也添加到父div，位于首先）。

I tried adding the role and aria-busy properties to the img (also to the parent div, at first).

此div出现时（通过更改display style属性），它正确显示为正在工作...，但我听不到任何提示，表明它正忙于用户应该等待，我错过了什么吗？

When this div appears (by changing the display style property), it correctly reads "Working..." but I hear no indication that it's busy and that the user should wait, am I missing something?

我一直到处寻找加载动画的示例，但到目前为止没有用。

I've looked all over for examples for loading animations, to no avail so far.

注意：我正在使用 NVDA 作为要测试的屏幕阅读器。

Note: I'm using NVDA as a screenreader to test.

谢谢

推荐答案

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

The best solution I could come up with was using role alert, and 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>

这篇关于如何标记WAI-ARIA的加载动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！