加载数据时的可访问性

Question

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

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

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

我尝试过 aria-relevant、aria-atomic 等，但似乎没有任何效果。

Answer 1

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

但是，如果您从中删除角色<spinny>（我猜这是一个自定义 html 标签？），那么您aria-label可能不会受到尊重，因为带有 aria-label 的东西通常需要一个角色而不是标签，以便标签由屏幕阅读器阅读。参见“实际支持：aria-label、aria-labelledby 和 aria-describedby ”

但是，我认为无论如何您都可能错误地使用了 aria-label 。您的实时区域应如下所示：

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

（请参阅Bootstrap 3 中的 sr-only 是什么？对于“sr-only”类。它会在视觉上“隐藏”，<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>

屏幕阅读器会说“数据已加载”。