我想创建一个可访问的网页,其中包含许多组件,可以在用户与页面交互时隐藏和显示这些组件.当显示组件时,我期望屏幕阅读器(在这种情况下为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> …