{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 看我几分像从前 的问题《How can I make screen readers respond to showing a》','https://www.manongdao.com/q-1248219.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I would like to create an accessible web page which contains a number of components that can be hidden and shown as the user interacts with the page. When a component is shown I expect a screen reader (in this case NVDA) to read the contents of the component.
As an example:
<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>In the above example clicking a button within component 1 will hide component 1 and show component 2.
Clicking a button within component 2 will hide component 2 and show component 1.
However NVDA does not seem to read the contents of the components when toggling between the components. Is there a way that this can be achieved?
Stuff those two blocks into an ARIA live region.
There are some 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 bepolite. There are corresponding live region roles as well, which I show below.I do not think you need the other ARIA bits nor
tabindexin your example code, but I do not know the scope of the page. Here is a different example instead:Further, the
aria-atomicproperty will tell the screen reader whether it should announce the entire thing (which is good for an alert message) or just the parts that changed (which might be a better fit for a timer).Avoid having more than one ARIA live region on a page.
This will also address screen readers besides NVDA.
Here is an example of an offline alert. Here is a handy slideshare that goes into more detail. There is a lot more out there now that you know what to search.