Addaw, ir a inicio Donar

Técnica ARIA WCAG 2.2

ARIA18Avisar de errores con una ventana de alerta (role="alertdialog")

Nombre oficial en el W3C: Usar aria-alertdialog para identificar errores

En pocas palabras

Cuando alguien envía un formulario con un dato incorrecto, se le puede avisar con una ventana de alerta que bloquea el resto de la página. Con role="alertdialog", el lector de pantalla la anuncia al abrirse. El foco entra en la ventana, se queda dentro y, al cerrarla, vuelve a donde estaba.

Por qué es importante

Un aviso de error que solo se ve no sirve a quien usa lector de pantalla. Esa persona puede seguir en el botón «Enviar» sin enterarse de que algo ha fallado.

Una ventana con role="alertdialog" se anuncia al abrirse y recibe el foco. La persona sabe qué error hay y, si el mensaje lo explica, cómo corregirlo. También ayuda a quien navega con teclado, porque no se pierde por la página.

Cómo se hace

  1. Cree la ventana con role="alertdialog" y aria-modal="true". También puede usar el elemento <dialog>, abierto con showModal(), y añadirle ese role.
  2. Dele un nombre con aria-labelledby, que apunte a su título, o con aria-label.
  3. Escriba en ella qué dato está mal y cómo corregirlo: «La fecha de la cita debe ser posterior a hoy».
  4. Incluya al menos un botón, como «Aceptar», y lleve el foco a él al abrir la ventana.
  5. Mientras esté abierta, el tabulador no debe salir de la ventana.
  6. Al cerrarla, devuelva el foco, si es posible, al lugar donde estaba antes.

Cómo comprobarlo

  1. Provoque el error, por ejemplo enviando el formulario con un dato mal escrito.
  2. Compruebe que el foco pasa a un elemento de la ventana, como su botón.
  3. Pulse el tabulador varias veces. El foco no debe salir de la ventana.
  4. Cierre la ventana y compruebe que el foco vuelve a donde estaba.
  5. Con un lector de pantalla, confirme que se anuncian el nombre de la ventana y el error, y que el texto explica cómo corregirlo.

Ejemplo

Ventana de alerta que explica un error en el formulario de cita previa.

<div role="alertdialog" aria-modal="true"
     aria-labelledby="tit-error" aria-describedby="txt-error">
  <h2 id="tit-error">Hay un error en el formulario</h2>
  <p id="txt-error">
    La fecha de la cita debe ser posterior a hoy.
    Escríbala con el formato dd/mm/aaaa.
  </p>
  <button type="button">Aceptar</button>
</div>
Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica ARIA18 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

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-label o aria-labelledby proporciona un nombre accesible al alertdialog.
  • El alertdialog contiene al menos un elemento enfocable, y el foco debe desplazarse a ese elemento cuando se abre el alertdialog.
  • El orden de tabulación queda restringido al interior del alertdialog mientras 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 el alertdialog.

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

  1. Provocar el error que hace que aparezca el alertdialog.
  2. Determinar que el alertdialog contiene al menos un elemento enfocable y que el foco se desplaza a ese elemento cuando se abre el alertdialog.
  3. Si se usa un elemento dialog no nativo: determinar que el orden de tabulación queda restringido al interior del alertdialog mientras está abierto y que, cuando se cierra el alertdialog, el foco vuelve, si es posible, a la posición que tenía antes de que se abriera el alertdialog.
  4. Examinar el elemento al que se ha aplicado alertdialog.
  5. Determinar que se ha usado correctamente el atributo aria-label o aria-labelledby para dar un nombre accesible al alertdialog.
  6. Determinar que el contenido del alertdialog identifica el error de entrada.
  7. Determinar si el contenido del alertdialog sugiere 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

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica ARIA18 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.