Jam*_*s.M 5 html javascript accessibility screen-readers
我想创建一个可访问的网页,其中包含许多组件,可以在用户与页面交互时隐藏和显示这些组件.当显示组件时,我期望屏幕阅读器(在这种情况下为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似乎不会读取组件的内容.有没有办法实现这一目标？
将这两个块填充到ARIA 实时区域中。
您需要了解一些实时区域属性才能使其正常工作。如果您希望它们在更改时立即公布，无论用户在做什么，都将是assertive. 如果您希望它等到用户完成交互，那么它将是polite. 还有相应的实时区域角色，我将在下面展示。
我认为您不需要其他 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 之外的屏幕阅读器。
下面是一个离线警报的例子。这是一个方便的幻灯片，其中详细介绍了。现在您知道要搜索的内容还有很多。
| 归档时间： |
|
| 查看次数： |
449 次 |
| 最近记录： |