Modales
Los modales siempre han sido problemáticos en accesibilidad, te recomendamos usarlos sólo en casos donde sean necesarios.
- No abrir modales de forma automática, es decir, si el usuario no ha realizado ninguna acción.
- Usar la etiqueta nativa
dialog
, de lo contrario, añadir el atributorole="dialog"
. - Podemos añadir
aria-labelledby
yaria-describedby
para añadir información sobre el modal. - Cuando abrimos un modal, debemos bloquear todo el contenido que esté detrás y poner el foco sobre el primer campo si lo tuviera, también debemos añadir el atributo
aria-modal="true"
(con este atributo no es necesario usararia-hidden
). - Se debe poder cerrar con la tecla
Esc
o bien pulsando un botón de cierre. - Una vez cerrado, el foco debe volver al punto donde se lanzó el modal.
<div id="dialog1" role="dialog" aria-labelledby="dialog1_label" aria-modal="true">
<h2 id="dialog1_label" class="dialog_label">Añadir nuevo usuario</h2>
<div class="dialog_form">
...
</div>
</div>
Dialog
La etiqueta dialog
ya es compatible en todos los navegadores actuales (chrome, edge, firefox, y safari).
- Si usamos la etiqueta
<dialog>
, añadiremos el atributoopen
cuando esté visible.
<dialog id="modal-prueba" open>
<h2>Modal de prueba</h2>
<p>Esto es un modal abierto</p>
</dialog>
Para interactuar con esta etiqueta tenemos los siguientes métodos:
- .show() - Muestra la etiqueta dialog
- .showModal() - Muestra el dialog como un modal, bloqueando el resto del contenido.
- .close() - Oculta la etiqueta dialog
Si queremos personalizar el fondo, tenemos el pseudo-elemento CSS ::backdrop
dialog::backdrop {
background-color: rgba(255,0,0,0.8);
}
Más información sobre dialog - w3.org.