Los nodos ARIA dialog y alertdialog deben tener un nombre accesible

Cuando aparece un diálogo en pantalla, las tecnologías asistivas 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 manera de entender su propósito, lo que puede ser desorientador y hacer que la interfaz sea difícil de usar.

Este problema afecta principalmente a usuarios ciegos o con baja visión que dependen de lectores de pantalla, así como a usuarios con discapacidades motoras que navegan con tecnología asistiva. Es marcado 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 — Referencia el 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 respaldo, aunque aria-label o aria-labelledby son preferidos.

Cualquiera que sea el 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, o 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 asistivas.

<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: usando aria-labelledby para referenciar 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: usando 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: usando el atributo title

El atributo title funciona como un mecanismo de nomenclatura de respaldo, aunque aria-label o aria-labelledby son generalmente preferidos porque title tiene soporte inconsistente entre tecnologías asistivas.

<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

→