如何让屏幕阅读器响应显示和隐藏动态 Web 应用程序中的内容？

Question

我想创建一个可访问的网页，其中包含许多可以在用户与页面交互时隐藏和显示的组件。当显示组件时，我希望屏幕 reader（在本例中为 NVDA）读取组件的内容。

举个例子：

<html>
<body>
 <div id="comp1" style="display:none;" role="region" tabindex="-1" aria-expanded="false">
  <div>This is component 1</div> 
  <button type="button" onclick="ShowComponent(comp2)">Show 2</button> 
 </div>
 <div id="comp2" style="display:none;" role="region" tabindex="-1" aria-expanded="false">
  <div>This is component 2</div>
  <button type="button" onclick="ShowComponent(comp1)">Show 1</button>
 </div>

 <script type="text/javascript">
  function HideAll() {  
   // hide both components
   var comp1 = document.getElementById("comp1");
   comp1.style.display = "none";
   comp1.setAttribute("aria-expanded", "false");
   
   var comp2 = document.getElementById("comp2");
   comp2.style.display = "none";
   comp2.setAttribute("aria-expanded", "false");
  }
  
  function ShowComponent(comp) {
   HideAll();
   
   // show this component
   comp.style.display = "block";
   comp.setAttribute("aria-expanded", "true");
   comp.focus();   
  } 
  
  ShowComponent(document.getElementById("comp1"));
 </script>
</body>
</html>

在上面的示例中，单击组件 1 中的按钮将隐藏组件 1 并显示组件 2。

单击组件 2 中的按钮将隐藏组件 2 并显示组件 1。

然而，在组件之间切换时，NVDA 似乎没有读取组件的内容。有什么办法可以实现吗？

Please see this Gist on GitHub to check using NVDA

Answer 1

将这两个块填充到 ARIA live region。

还有一些live region properties you need to know to make it work. If you want them to be announced as soon as they change, no matter what the user is doing, then it will be assertive. If you want it to wait until the user finishes an interaction, then it will be polite. There are corresponding live region roles，我在下面展示。

我认为您不需要其他 ARIA 位，也不需要示例代码中的 tabindex，但我不知道页面的范围。这是一个不同的例子：

<div role="alert" aria-live="assertive">
Anything in here will be announced as soon as it changes.
</div>

<div role="status" aria-live="polite">
Anything in here will be announced when it changes but only after the user has stopped interacting with the page..
</div>

此外，aria-atomic 属性会告诉屏幕 reader 是应该通告整个事件（这对提醒消息有好处）还是只通告发生变化的部分（这可能更适合计时器）。

避免在一个页面上有多个 ARIA 实时区域。

除 NVDA 外，这还将解决屏幕 readers。

这是一个example of an offline alert. Here is a handy slideshare that goes into more detail。现在您知道要搜索什么了，还有更多内容。

如何让屏幕阅读器响应显示和隐藏动态 Web 应用程序中的内容？

How can I make screen readers respond to showing and hiding content in a dynamic web application?

html

javascript

accessibility

screen-readers