Etiquetas de los diálogos

Silktide comprueba que los diálogos - ventanas emergentes que aparecen sobre la página - declaren un nombre que pueda ser leído por la , para que las personas sepan qué se acaba de abrir.

Un diálogo se marca en asignando a un elemento el rol dialog. El rol indica a la tecnología de asistencia que ha aparecido una ventana independiente, pero por sí solo no dice para qué sirve la ventana.

<!-- Problema: un diálogo sin nombre accesible -->
<div role="dialog">
  <p>Tu sesión está a punto de expirar.</p>
</div>

Por qué es importante

Cuando se abre un diálogo, un lo anuncia y mueve el foco del visitante a su interior. Si el diálogo tiene un nombre, la persona escuchará algo como «Expiración de la sesión, diálogo» y comprenderá de inmediato la interrupción. Sin él, solo oirá «diálogo»: la han apartado de lo que estaba haciendo sin explicación y tendrá que explorar el contenido para averiguar por qué.

Cómo solucionarlo

Asigna a cada diálogo un , usando uno de estos métodos:

aria-labelledby apuntando al id del título visible del diálogo: la mejor opción, porque las personas videntes ven el mismo nombre:

<!-- Corregido: el diálogo se nombra por su encabezado -->
<div role="dialog" aria-labelledby="timeout-title">
  <h2 id="timeout-title">Expiración de la sesión</h2>
  <p>Tu sesión está a punto de expirar.</p>
</div>

aria-label con el nombre como texto, cuando el diálogo no tiene título visible:

<div role="dialog" aria-label="Expiración de la sesión">
  ...
</div>

Cómo lo comprueba Silktide

Buscar en cada página todos los elementos cuyo role sea dialog.
Determinar el nombre accesible de cada diálogo, a partir de atributos como aria-label y aria-labelledby.
Informar de cada diálogo cuyo nombre accesible falte o esté vacío.

Solución de problemas

Mi diálogo solo aparece tras la interacción del usuario

Silktide examina cada página al cargarse. Un diálogo que solo se añade a la página más tarde - por ejemplo, tras hacer clic en un botón - puede que no se analice, pero aun así necesita una etiqueta para quienes lleguen a él.

Uso el elemento de diálogo nativo

Esta comprobación examina los elementos que declaran role="dialog" explícitamente. Un elemento <dialog> nativo sin ese rol no se analiza, pero la orientación sigue siendo válida: asígnale un nombre accesible con aria-labelledby o aria-label.