Modals
El diálogo modal se caracteriza en que abre una nueva ventana que requiere la respuesta del usuario.
Ejemplo de diálogo modal de Bootstrap.
Cuando se abre el diálogo toma el foco. El contenido fuera del diálogo se suele oscurecer y no es accesible hasta que se cierra la ventana.
Atributos WAI-ARIA
El elemento que contiene la ventana tiene los siguientes atributos:
-
role="dialog" -
aria-hidden="true"cuando el diálogo está cerrado. -
aria-modal="true"cuando el diálogo está abierto. -
aria-labelledbyasociado al título de la ventana (si la ventana no tiene encabezado usamosaria-label).
Interacción con teclado
Cuando el diálogo se abre el foco se mueve dentro de la ventana.
- Tab y Shift + Tab para moverse por los diferentes elementos enfocables dentro del diálogo.
- Esc para cerrar la ventana.
Puedes ver más información en ARIA Authoring Practices Guide - Dialog (Modal).