Los nodos de diálogo y alertdialog de ARIA deben tener un nombre accesible

Cuando un diálogo aparece en pantalla, las tecnologías de asistencia lo anuncian al usuario junto con su nombre accesible. Este nombre proporciona contexto esencial: le dice al usuario de qué trata el diálogo, como “Confirmar eliminación” o “Iniciar sesión en tu cuenta”. Sin un nombre accesible, los usuarios de lectores de pantalla escuchan que se ha abierto un diálogo pero no tienen forma de entender su propósito, lo cual puede ser desorientador y hacer que la interfaz sea difícil de usar.

Este problema afecta principalmente a los usuarios que son ciegos o tienen baja visión y dependen de lectores de pantalla, así como a usuarios con discapacidades motoras que navegan con tecnología de asistencia. Se señala como un problema grave por el motor de accesibilidad axe y se alinea con las mejores prácticas de accesibilidad de Deque.

Cómo solucionarlo

Asegúrate de que cada elemento con role="dialog" o role="alertdialog" tenga un nombre accesible usando uno de estos métodos:

1. aria-label — Proporciona un nombre conciso y descriptivo directamente en el elemento del diálogo.
2. aria-labelledby — Hace referencia al id de un elemento visible (típicamente un encabezado) dentro del diálogo que sirve como su título.
3. title — Usa el atributo HTML title como alternativa, aunque se prefieren aria-label o aria-labelledby.

Independientemente del método que elijas, asegúrate de que el nombre describa claramente el propósito del diálogo. Evita cadenas vacías o referencias a elementos que no existen o no tienen contenido de texto.

Ejemplos

Incorrecto: diálogo sin nombre accesible

El diálogo no tiene aria-label, aria-labelledby ni title, por lo que los lectores de pantalla no pueden anunciar su propósito.

<div role="dialog">
  <h2>Unsaved Changes</h2>
  <p>You have unsaved changes. Do you want to save before leaving?</p>
  <button>Save</button>
  <button>Discard</button>
</div>

Incorrecto: aria-label vacío

Un aria-label vacío no proporciona información útil a las tecnologías de asistencia.

<div role="alertdialog" aria-label="">
  <p>An error occurred while saving your file.</p>
  <button>OK</button>
</div>

Incorrecto: aria-labelledby apuntando a un elemento inexistente o vacío

Si el elemento referenciado no existe o no contiene texto, el diálogo aún no tiene nombre accesible.

<div role="dialog" aria-labelledby="dialog-title">
  <p>Please confirm your selection.</p>
  <button>Confirm</button>
</div>
<!-- No existe ningún elemento con id="dialog-title" -->

<div role="dialog" aria-labelledby="dialog-title">
  <span id="dialog-title"></span>
  <p>Please confirm your selection.</p>
  <button>Confirm</button>
</div>

Correcto: usar aria-labelledby para hacer referencia a un encabezado

El atributo aria-labelledby apunta al encabezado visible del diálogo, dándole un nombre accesible claro.

<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Unsaved Changes</h2>
  <p>You have unsaved changes. Do you want to save before leaving?</p>
  <button>Save</button>
  <button>Discard</button>
</div>

Correcto: usar aria-label

El atributo aria-label proporciona un nombre conciso directamente en el diálogo.

<div role="alertdialog" aria-label="File save error">
  <p>An error occurred while saving your file. Please try again.</p>
  <button>Retry</button>
  <button>Cancel</button>
</div>

Correcto: usar el atributo title

El atributo title funciona como un mecanismo de denominación de respaldo, aunque generalmente se prefieren aria-label o aria-labelledby porque title tiene soporte inconsistente en las tecnologías de asistencia.

<div role="dialog" title="Export Settings">
  <p>Choose a format for your export.</p>
  <select>
    <option>PDF</option>
    <option>CSV</option>
  </select>
  <button>Export</button>
  <button>Cancel</button>
</div>

Learn more:

Deque Reference

Deque University - How To Fix

→