El atributo "aria-describedby" debe apuntar a un elemento en el mismo documento.

El atributo aria-describedby es una parte fundamental de WAI-ARIA, la especificación de la Iniciativa de Accesibilidad Web para hacer el contenido web más accesible. Funciona creando una relación entre un elemento y uno o más elementos que proporcionan texto descriptivo adicional. Los lectores de pantalla y otras tecnologías de asistencia usan esta relación para anunciar el texto descriptivo cuando un usuario interactúa con el elemento.

Cuando estableces aria-describedby="some-id", el navegador busca un elemento con id="some-id" en el mismo documento. Si no existe ningún elemento coincidente, la referencia se rompe. Esto significa que las tecnologías de asistencia no pueden encontrar la descripción, y el atributo no hace nada silenciosamente. El validador W3C marca esto como un error porque una referencia colgante indica un error: el elemento referenciado fue eliminado, renombrado, o nunca se añadió.

Este problema suele aparecer debido a:

• Errores tipográficos en el valor id — el valor de aria-describedby no coincide exactamente con el id del elemento objetivo (la coincidencia es sensible a mayúsculas y minúsculas).
• Contenido dinámico — el elemento descrito se renderiza condicionalmente o es inyectado por JavaScript después de la validación.
• Errores de copiar y pegar — el marcado se copió de otra página o componente, pero el elemento referenciado no se incluyó.
• Refactorización — el id de un elemento se cambió o el elemento se eliminó, pero la referencia aria-describedby no se actualizó.

Múltiples valores id pueden listarse en aria-describedby, separados por espacios. Cada id de esa lista debe resolverse a un elemento en el documento. Si incluso uno falta, el validador reportará un error para esa referencia.

Cómo solucionarlo

1. Revisa errores tipográficos. Compara el valor en aria-describedby con el id del elemento objetivo. Recuerda que la coincidencia de id es sensible a mayúsculas y minúsculas — helpText y helptext son diferentes.
2. Añade el elemento faltante. Si el elemento descriptivo aún no existe, créalo con el id coincidente.
3. Elimina referencias obsoletas. Si la descripción ya no es necesaria, elimina completamente el atributo aria-describedby en lugar de dejar una referencia rota.
4. Verifica todos los IDs en una lista de múltiples valores. Si aria-describedby contiene múltiples IDs separados por espacios, confirma que cada uno existe.

Ejemplos

Referencia rota (desencadena el error)

En este ejemplo, aria-describedby apunta a password-help, pero no existe ningún elemento con ese id en el documento:

<label for="password">Password</label>
<input type="password" id="password" aria-describedby="password-help">

Solucionado añadiendo el elemento referenciado

Añadir un elemento con id="password-help" resuelve el problema:

<label for="password">Password</label>
<input type="password" id="password" aria-describedby="password-help">
<p id="password-help">Must be at least 8 characters with one number.</p>

Referencia rota debido a un error tipográfico

Aquí el valor de aria-describedby usa un caso diferente al id del elemento:

<input type="text" id="email" aria-describedby="emailHelp">
<small id="emailhelp">We'll never share your email.</small>

La solución es hacer que los valores id coincidan exactamente:

<input type="text" id="email" aria-describedby="email-help">
<small id="email-help">We'll never share your email.</small>

Múltiples IDs con uno faltante

Al listar múltiples descripciones, cada id debe estar presente:

<!-- "format-hint" existe pero "length-hint" no — esto desencadena el error -->

<input type="text" id="username" aria-describedby="format-hint length-hint">
<span id="format-hint">Letters and numbers only.</span>

Soluciónalo añadiendo el elemento faltante:

<input type="text" id="username" aria-describedby="format-hint length-hint">
<span id="format-hint">Letters and numbers only.</span>
<span id="length-hint">Between 3 and 20 characters.</span>

Eliminando el atributo cuando no se necesita descripción

Si el contenido descriptivo ha sido eliminado y ya no es relevante, simplemente elimina el atributo aria-describedby:

<input type="text" id="search">

Más información:

MDN Reference

Using aria-describedby - MDN Web Docs

→

MDN Reference

ARIA States and Properties - MDN Web Docs

→

WHATWG Spec

ARIA in HTML

→