加载数据时的可访问性

时间:2018-10-31 12:43:32

标签: html wai-aria

我正在研究可访问性问题。 我有一个棘手的/加载器,它在加载数据时出现在屏幕上。

<spinny aria-live="polite" role="alert" aria-label="Loading Page">

因此,当屏幕上出现细线时,屏幕阅读器会提醒我细线已加载。 现在,我希望当棘手的物体离开屏幕时,我希望屏幕阅读器提供诸如加载的数据之类的消息。

我尝试了与咏叹调相关的,咏叹调原子的等,但是似乎没有任何作用。

1 个答案:

答案 0 :(得分:2)

首先,您的代码示例正在指定冲突的信息。使用role="alert"会给您一个隐式aria-live="assertive",但同时您还要指定aria-live="polite"。我建议删除 role="alert"。拥有aria-live="polite"就足够了。

但是,如果您从<spinny>中删除了该角色(我猜这是一个自定义html标签?),那么您的aria-label可能就不受欢迎,因为经常需要使用带有aria标签的东西除了标签以外的角色,以便屏幕阅读器可以读取标签。参见“ Practical Support: aria-label, aria-labelledby and aria-describedby

但是,我认为您可能仍然错误地使用了aria标签。您的居住区域应类似于:

<div aria-live="polite" class="sr-only" id="myspinny"></div>

(有关“仅sr”类,请参见What is sr-only in Bootstrap 3?。它将视觉上“隐藏” <div>,以便您看到的所有文本对于可见的用户而言都是不可见的,但仍然可供屏幕阅读器用户使用。)

在加载数据时,您应该(通过javascript)将文本注入“ myspinny ”中,使其看起来像:

<div aria-live="polite" class="sr-only" id="myspinny">Loading Page</div>

由于<div>是实时区域,因此将宣布文本(“加载页面”)。

当数据加载完成并且您想要删除微调器时,将新文本插入“ myspinny ”中,如下所示:

<div aria-live="polite" class="sr-only" id="myspinny">Data Loaded</div>

,屏幕阅读器将显示“已加载数据”。