我正在研究可访问性问题。 我有一个棘手的/加载器，它在加载数据时出现在屏幕上。
<spinny aria-live="polite" role="alert" aria-label="Loading Page">
因此，当屏幕上出现细线时，屏幕阅读器会提醒我细线已加载。 现在，我希望当棘手的物体离开屏幕时，我希望屏幕阅读器提供诸如加载的数据之类的消息。
我尝试了与咏叹调相关的，咏叹调原子的等，但是似乎没有任何作用。
答案 0 :(得分：2)
首先，您的代码示例正在指定冲突的信息。使用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标签。您的居住区域应类似于：
<div aria-live="polite" class="sr-only" id="myspinny"></div>
（有关“仅sr”类，请参见What is sr-only in Bootstrap 3?。它将视觉上“隐藏” <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>
，屏幕阅读器将显示“已加载数据”。