Faltan ID de etiqueta ARIA
Silktide comprueba los elementos que toman su de otros elementos por ID e informa de referencias a ID que no existen en la página. Una referencia rota deja el elemento sin el nombre que debía tener.
El atributo aria-labelledby nombra un elemento señalando el id del elemento que contiene su etiqueta: un encabezado que nombra un diálogo, o un rótulo que nombra un control:
<!-- Problema: la referencia dice "dialog-label" pero el id del encabezado es "dialog-labell" -->
<h2 id="dialog-labell">¡Mensaje importante!</h2>
<div role="dialog" aria-labelledby="dialog-label">
Por qué es importante
El nombre accesible es lo que un anuncia cuando un visitante llega a un elemento. Cuando una referencia aria-labelledby no apunta a nada, el elemento puede anunciarse sin nombre —un diálogo sin nombre, un botón sin nombre— y el visitante tiene que adivinar su propósito. Estas roturas son invisibles: la página se ve igual, e incluso unas pruebas de usuario minuciosas rara vez detectan un nombre que falló en asociarse silenciosamente. Los ID se renombran y el contenido se reestructura, por lo que las referencias se degradan con el tiempo.
Cómo solucionarlo
- Busca el elemento que debía proporcionar el nombre y haz que el valor de
aria-labelledbycoincida exactamente con suid(los ID distinguen mayúsculas y minúsculas):
<!-- Solución: la referencia coincide con el id del encabezado -->
<h2 id="dialog-label">¡Mensaje importante!</h2>
<div role="dialog" aria-labelledby="dialog-label">
- Si se eliminó el elemento que proporcionaba la etiqueta, restáuralo o cambia a un atributo
aria-labelque contenga el nombre como texto. - Cuando un elemento sea nombrado por varios, enumera cada ID separado por espacios y comprueba cada uno.
Cómo lo comprueba Silktide
- Busca todos los elementos con un atributo
aria-labelledbyen cada página. - Divide el valor del atributo en ID individuales.
- Informa de cada ID referenciado que no exista en ningún lugar de la página.