Question

此容器是即时创建的，并已添加到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属性创建的，并且元素的值没有变化。

Answer 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>

Answer 2

role=“status”最适合传达文字。另外，您可以选择不添加role，而添加“aria-live=“assertive”。确保在加载页面时从一开始就存在带有role=“status” / aria-live的容器，然后在需要声明时为其提供一些内容。您应该这样做，因为Firefox + NVDA屏幕阅读器不会立即看到新的活动区域何时出现在DOM中。从一开始就将其呈现是确保浏览器+屏幕阅读器侦听该元素中的更改的一种可靠方法。

您还可以考虑在要更新的实际元素上设置aria-busy=“true”。

此外，将aria-label的文字与其内容相同（“正在加载...”）也不会产生任何效果。只需跳过标签并保留文本即可。

创建div时可以访问Loading div

2 个答案: