我想创建一个可访问的网页，其中包含许多可以在用户与页面交互时隐藏和显示的组件。当显示组件时，我希望屏幕阅读器(在本例中为 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 似乎不会读取组件的内容。有什么办法可以实现吗？
最佳答案
将这两个 block 填充到 ARIA live region 中.
有一些live region properties你需要知道让它发挥作用。如果你希望他们一改变就被宣布，不管用户在做什么，那么它就是assertive。如果您希望它等到用户完成交互，那么它将是礼貌的。有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属性将告诉屏幕阅读器它是否应该宣布整个事情(这对警告消息很有用)或只宣布改变的部分(这可能更适合计时器)。
避免在一个页面上有多个 ARIA 实时区域。
除了 NVDA，这还将解决屏幕阅读器问题。
这是一个 example of an offline alert .这是一个方便的 slideshare that goes into more detail .既然您知道要搜索什么，那么还有很多。
关于javascript - 如何让屏幕阅读器响应显示和隐藏动态 Web 应用程序中的内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40766358/