All geek questions in one place

How to make screen readers react to showing and hiding content in a dynamic web application?

I would like to create an accessible web page containing a number of components that can be hidden and shown when the user interacts with the page. When a component is displayed, I expect the 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>
Run codeHide result

In the above example, pressing a button in component 1 will hide component 1 and show component 2.

Pressing the button in component 2 will hide component 2 and display component 1.

However, the NVDA does not seem to read the contents of the components when switching between components. Is there a way this can be achieved?

Please see this Gist on GitHub to check NVDA usage.

+4
1

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.

. -, . , , .

+4

Source: https://habr.com/ru/post/1661716/

More articles:


All Articles