加载数据时的可访问性
Accessibility when data is loaded
我正在处理可访问性问题。
我有一个 spinny/loader，它在加载数据时出现在屏幕上。
<spinny aria-live="polite" role="alert" aria-label="Loading Page">
所以当 spinny 出现在屏幕上时，屏幕 reader 会提醒我 spinny 已加载。
现在我希望当 spinny 离开屏幕时，我希望屏幕 reader 提供诸如数据加载之类的消息。
我尝试过 aria-relevant、aria-atomic 等，但似乎没有任何效果。
首先，您的代码示例指定了相互冲突的信息。使用 role="alert" 给你一个隐含的 aria-live="assertive" 但你也指定了 aria-live="polite"。我建议 删除 role="alert"。 aria-live="polite"就够了。
但是，如果您从 <spinny> 中删除角色（我猜这是一个自定义 html 标签？），那么您的 aria-label 可能不会被兑现，因为 aria-带标签的东西通常需要除了标签之外的角色才能让屏幕读取标签 reader。参见“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-only" class。它会在视觉上 "hide" 和 <div>，这样您放入其中的任何文本都不会视力正常的用户可以看到，但屏幕 reader 用户仍然可以看到。）
加载数据时，您应该将文本（通过 javascript）插入“myspinny”，使其看起来像：
<div aria-live="polite" class="sr-only" id="myspinny">Loading Page</div>
由于 <div> 是一个实时区域，文本 ("Loading Page") 将被宣布。
当数据加载完成并且您想删除微调器时，将新文本注入“myspinny”，使其看起来像：
<div aria-live="polite" class="sr-only" id="myspinny">Data Loaded</div>
屏幕 reader 会显示 "Data Loaded"。
我正在处理可访问性问题。 我有一个 spinny/loader，它在加载数据时出现在屏幕上。
<spinny aria-live="polite" role="alert" aria-label="Loading Page">
所以当 spinny 出现在屏幕上时，屏幕 reader 会提醒我 spinny 已加载。 现在我希望当 spinny 离开屏幕时，我希望屏幕 reader 提供诸如数据加载之类的消息。
我尝试过 aria-relevant、aria-atomic 等，但似乎没有任何效果。
首先，您的代码示例指定了相互冲突的信息。使用 role="alert" 给你一个隐含的 aria-live="assertive" 但你也指定了 aria-live="polite"。我建议 删除 role="alert"。 aria-live="polite"就够了。
但是，如果您从 <spinny> 中删除角色（我猜这是一个自定义 html 标签？），那么您的 aria-label 可能不会被兑现，因为 aria-带标签的东西通常需要除了标签之外的角色才能让屏幕读取标签 reader。参见“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-only" class。它会在视觉上 "hide" 和 <div>，这样您放入其中的任何文本都不会视力正常的用户可以看到，但屏幕 reader 用户仍然可以看到。）
加载数据时，您应该将文本（通过 javascript）插入“myspinny”，使其看起来像：
<div aria-live="polite" class="sr-only" id="myspinny">Loading Page</div>
由于 <div> 是一个实时区域，文本 ("Loading Page") 将被宣布。
当数据加载完成并且您想删除微调器时，将新文本注入“myspinny”，使其看起来像：
<div aria-live="polite" class="sr-only" id="myspinny">Data Loaded</div>
屏幕 reader 会显示 "Data Loaded"。