我正在处理可访问性问题。 我有一个 spinny/loader，它会在加载数据时出现在屏幕上。
<spinny aria-live="polite" role="alert" aria-label="Loading Page">
因此，当 spinny 出现在屏幕上时，屏幕阅读器会提醒我 spinny 已加载。 现在我希望当 spinny 离开屏幕时，我希望屏幕阅读器提供消息，例如加载的数据或类似的东西。
我尝试了 aria-relevant、aria-atomic 等，但似乎没有任何效果。
【问题讨论】：
首先，您的代码示例指定了相互冲突的信息。使用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>
屏幕阅读器会显示“数据已加载”。
【讨论】：