此容器是即时创建的,并已添加到dom中。加载数据后,将从dom中删除该容器。当这个容器被添加到dom并且解说器/ NVDA打开时,我需要宣布“正在加载”
<div id="loadingContainer">
<span id="spinner">
<svg/>
</span>
<div id="loadingText" aria-label="Loading...">Loading...</div>
</div>
loadingtext div的尝试角色=“ alert”,但它宣布“ alert”,这对我不利。尝试过的角色=“状态”,但它没有宣布任何内容,我想是因为容器是使用role属性创建的,并且元素的值没有变化。
答案 0 :(得分:1)
一个简单的问题是为aria-live="polite"
添加了一个容器。我总是将polite
用于咏叹调活动区域,除非绝对有必要立即宣布一条消息,而这是很少需要的。
这样您的代码就可以了
<div aria-live="polite">
<!-- your newly created <div> will go here -->
</div>
创建容器后,您将拥有:
<div aria-live="polite">
<div id="loadingContainer">
<span id="spinner">
<svg/>
</span>
<div id="loadingText" aria-label="Loading...">Loading...</div>
</div>
</div>
您还必须更改aria-relevant
的值,因为默认值为“ 添加文字”,该值仅在您添加 DOM元素时才会宣布。如果您希望在删除该DOM元素时发布公告,则也需要“ 删除”。或者直接使用“ all ”。
<div aria-live="polite" aria-relevant="all">
<!-- your newly created <div> will go here -->
</div>
答案 1 :(得分:0)
role=“status”
最适合传达文字。另外,您可以选择不添加role
,而添加“aria-live=“assertive”
。确保在加载页面时从一开始就存在带有role=“status”
/ aria-live
的容器,然后在需要声明时为其提供一些内容。您应该这样做,因为Firefox + NVDA屏幕阅读器不会立即看到新的活动区域何时出现在DOM中。从一开始就将其呈现是确保浏览器+屏幕阅读器侦听该元素中的更改的一种可靠方法。
您还可以考虑在要更新的实际元素上设置aria-busy=“true”
。
此外,将aria-label
的文字与其内容相同(“正在加载...”)也不会产生任何效果。只需跳过标签并保留文本即可。