Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

Please see this Gist on GitHub to check using NVDA

like image 304
James.M Avatar asked Nov 23 '16 13:11

James.M


People also ask

How do I hide text and make it accessible by screen reader?

To hide text from a screen reader and display it visually, use the aria-hidden attribute and set it to true. To hide text from a screen reader and hide it visually use the hidden attribute. You can also use CSS to set display: none or visibility: hidden to hide an element from screen readers and visually.

Can screen readers see visibility hidden?

Most of the screen reader will not 'speak' display:none and visibility: hidden , but there are few screen readers like pwWebSpeak and HtReader which will read even these too.

How do I get screen reader to ignore an element?

To hide an element to screen readers (and child elements), simply add the aria-hidden="true" attribute.

How do screen readers work on websites?

Screen readers use HTML tags to understand the content and regions of the page, and what elements are available for the user to select. For this reason, the most effective way to make your web pages accessible is to structure your HTML code with semantically rich tags.


1 Answers

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 be polite. There are corresponding live region roles as well, which I show below.

I do not think you need the other ARIA bits nor tabindex in your example code, but I do not know the scope of the page. Here is a different example instead:

<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>

Further, the aria-atomic property 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.

like image 54
aardrian Avatar answered Oct 25 '22 19:10

aardrian