Tengo un modal y no quiero que la voz en off lea el contenido detrás de él. Establecer aria-modal=true debería haber sido suficiente, pero luego vi que VoiceOver no es compatible con este comportamiento de fábrica como mejores lectores de pantalla como NVDA y JAWS.
https://a11ysupport.io/tech/aria/aria-modal_attribute#support-table-2
Y dice que los autores pueden implementar esta funcionalidad por su cuenta para VoiceOver. Atrapé con éxito el foco del teclado dentro del modal (usando la tecla de tabulación) con JS, pero la voz en off va detrás del contenido cuando uso las teclas de flecha. ¿Cómo puedo conseguir esto? Mi modal está estructurado así: -
<div role="dialog" aria-modal="true" aria-labelledby="title" aria-describedby="description" tabindex="-1" > <div class="sticky-header"> <h2 id="title" class="title"> This is a heading </h2> </div> <div class="modal-content"> <p id="description"> This is a paragraph. </p> </div> <div class="sticky-footer"> <button type="button" > Cancel </button> <a href="#"> Proceed </a> </div> </div>Yo también tuve este problema. Con voz en off, el usuario puede "hacer clic" fuera y salir del cuadro de diálogo. Creo que este es un problema con VoiceOver y no pude encontrar ninguna solución en la web. No es la mejor solución, pero lo que terminé fue agregar un booleano al evento de diálogo abierto/cerrado. Luego usa el booleano con aria-hidden
<div [attr.aria-hidden]="IsMenuOpen">content behind menu</div> <button (click)="openMenu(); isMenuOpen = !isMenuOpen" ></button>