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

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

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.

Puedes ver un artículo en inglés sobre esta extensión en A11y Modals: Revisited.

Nota: HTML incluye el elemento dialog para crear ventanas interactivas. El problema es que el soporte por parte de los navegadores es aún muy bajo.