Técnica ARIA WCAG 2.2
ARIA18Usar aria-alertdialog para identificar errores
En resumen
Cuando una persona introduce datos no válidos en un formulario, conviene avisarla de forma que no pase desapercibida. Esta técnica usa un cuadro de diálogo modal con role="alertdialog", con nombre accesible, que recibe el foco al abrirse, mantiene la tabulación dentro de él y devuelve el foco a su posición original al cerrarse. Así los lectores de pantalla anuncian el error de inmediato y el mensaje puede incluir también cómo corregirlo.
Aplicabilidad
Tecnologías que admiten Accessible Rich Internet Applications (WAI-ARIA).
Descripción
El propósito de esta técnica es avisar a las personas de que se ha producido un error de entrada. El uso de role="alertdialog" crea una notificación. Esta notificación debe ser modal y tener las siguientes características:
- El atributo
aria-labeloaria-labelledbyproporciona un nombre accesible al alertdialog. - El
alertdialogcontiene al menos un elemento enfocable, y el foco debe desplazarse a ese elemento cuando se abre elalertdialog. - El orden de tabulación queda restringido al interior del
alertdialogmientras está abierto. - Cuando se cierra el
alertdialog, el foco vuelve, si es posible, a la posición que tenía antes de que se abriera elalertdialog.
Ejemplos
Diálogo de alerta
Este ejemplo muestra cómo puede usarse una notificación con role="alertdialog" para avisar a alguien de que ha introducido información no válida.
<dialog aria-labelledby="alert-heading" id="date-alert" role="alertdialog">
<h1 id="alert-heading">Error</h1>
<p>Employee's Birth Date is after their hire date. Please verify the birth date and hire date.</p>
<button command="close" commandfor="date-alert" type="button">Return to page and correct error</button>
</dialog>Ejemplo funcional: Usar aria-alertdialog para identificar errores
.
Pruebas
Procedimiento
- Provocar el error que hace que aparezca el
alertdialog. - Determinar que el
alertdialogcontiene al menos un elemento enfocable y que el foco se desplaza a ese elemento cuando se abre elalertdialog. - Si se usa un elemento
dialogno nativo: determinar que el orden de tabulación queda restringido al interior delalertdialogmientras está abierto y que, cuando se cierra elalertdialog, el foco vuelve, si es posible, a la posición que tenía antes de que se abriera elalertdialog. - Examinar el elemento al que se ha aplicado
alertdialog. - Determinar que se ha usado correctamente el atributo
aria-labeloaria-labelledbypara dar un nombre accesible al alertdialog. - Determinar que el contenido del
alertdialogidentifica el error de entrada. - Determinar si el contenido del
alertdialogsugiere cómo corregir el error.
Resultados esperados
- Las comprobaciones n.º 2, n.º 3, n.º 5 y n.º 6 son verdaderas. Para el criterio de conformidad 3.3.3 Sugerencias ante errores, la comprobación n.º 7 también es verdadera.
Recursos
- WAI-ARIA Authoring Practices Guide (guía de prácticas de autor de WAI-ARIA)
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica ARIA18 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
