加载数据时的可访问性

Question

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

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

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

我尝试了与咏叹调相关的，咏叹调原子的等，但是似乎没有任何效果。

Answer 1

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

但是，如果您从<spinny>删除角色（我猜这是自定义html标签？），那么您的aria-label可能就不兑现，因为带有aria标签的东西通常除了标签之外还需要一个角色为了让屏幕阅读器读取标签。 请参阅“ 实践支持：aria标签，aria标签由和aria描述由 ”

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

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

（请参阅Bootstrap 3中的什么是sr-only？有关“仅sr”类的信息。它将在视觉上“隐藏” <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>

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