¿Cómo puedo hacer que los lectores de pantalla respondan para mostrar y ocultar contenido en una aplicación web dinámica?

Me gustaría crear una página web accesible que contenga una serie de componentes que se pueden ocultar y mostrar a medida que el usuario interactúa con la página. Cuando se muestra un componente, espero que un lector de pantalla (en este caso, NVDA) lea los contenidos del componente.

Como ejemplo:

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

En el ejemplo anterior, onclick en un button dentro del componente 1 se ocultará el componente 1 y se mostrará el componente 2.

Hacer clic en un button dentro del componente 2 ocultará el componente 2 y mostrará el componente 1.

Sin embargo, parece que NVDA no lee el contenido de los componentes al alternar entre los componentes. ¿Hay alguna manera de lograr esto?

Por favor, mira este Gist en GitHub para verificar usando NVDA

Rellene esos dos bloques en una región en vivo de ARIA .

Hay algunas properties de la región en vivo que necesita saber para que funcione. Si desea que se anuncien tan pronto como cambien, no importa lo que el usuario esté haciendo, entonces será assertive . Si desea que espere hasta que el usuario finalice una interacción, será polite . También hay roles de región en vivo correspondientes , que muestro a continuación.

No creo que necesite los otros bits ARIA ni tabindex en su código de ejemplo, pero no conozco el scope de la página. Aquí hay un ejemplo diferente en su lugar:

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

Además, la propiedad aria-atomic le dirá al lector de pantalla si debe anunciar todo (lo que es bueno para un post de alerta) o solo las partes que cambiaron (lo que podría ser mejor para un timer).

Evite tener más de una región en vivo de ARIA en una página.

Esto también se dirigirá a lectores de pantalla además de NVDA.

Aquí hay un ejemplo de una alerta fuera de línea . Aquí hay un slideshare útil que entra en más detalles . Hay mucho más por ahí ahora que sabe qué search.