html - 加载数据时的可访问性

Question

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

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

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

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

Answer 1

首先，您的代码示例指定了冲突信息。使用 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-label 。您的实时区域应如下所示:

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

(请参阅 What is sr-only in Bootstrap 3? 以了解“仅限 sr”类。它将在视觉上“隐藏” <div>，因此您放入其中的任何文本对于视力正常的用户都将不可见，但仍可供屏幕阅读器用户使用。 )

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

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

自 <div>是一个实时区域，文本(“加载页面”)将被公布。

当数据加载完成并且您想要移除微调器时，将新文本注入(inject)“myspinny”，使其看起来像:

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

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