Saltar al contenido principal

Ventana modal

La ventana modal se caracteriza en que toma el foco hasta que se realiza una acción determinada sobre ella.

Ejemplo

Este programa se encarga de añadir los atributos necesarios para que la ventana modal sea accesible al incluir la clase a11y-modal:

  • El rol dialog para indicar que se abre una ventana de diálogo que requiere la entrada de información o una respuesta por parte del usuario (existe la opción de cambiar a rol alertdialog en caso de tratarse de una alerta).

  • Un atributo aria-labelledby para identificar el título de la ventana. Si la ventana no tiene encabezado se puede incluir mediante un atributo (data-set-modal-title) y aparece el texto con una etiqueta aria-label.

  • Un atributo aria-hidden para indicar si la ventana se encuentra visible o no.

  • El foco vuelve al último elemento seleccionado al cerrar la ventana.

Nota: Este ejemplo utiliza el plugin Accessible Modal Window de Scott O’Hara.