加载数据时的可访问性

Posted 2023-03-05

【中文标题】加载数据时的可访问性

【英文标题】：Accessibility when data is loaded

【发布时间】：2019-04-04 15:15:11

【问题描述】：

我正在处理可访问性问题。 我有一个 spinny/loader，它会在加载数据时出现在屏幕上。

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

因此，当 spinny 出现在屏幕上时，屏幕阅读器会提醒我 spinny 已加载。 现在我希望当 spinny 离开屏幕时，我希望屏幕阅读器提供消息，例如加载的数据或类似的东西。

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

【参考方案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）将文本注入“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>

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