El atributo “aria-labelledby” debe apuntar a un elemento del mismo documento.

El atributo aria-labelledby crea una relación entre un elemento y el contenido de texto que lo etiqueta. Funciona apuntando al id de uno o más elementos cuyo texto debe usarse como nombre accesible. Cuando el validador informa que aria-labelledby debe apuntar a un elemento en el mismo documento, significa que al menos uno de los valores de id que referenciaste no corresponde a ningún elemento en la página.

Esto típicamente sucede por algunas razones:

• Error tipográfico en el id — el valor de aria-labelledby no coincide exactamente con el id del elemento objetivo (recuerda que los IDs distinguen entre mayúsculas y minúsculas).
• El elemento referenciado fue eliminado — el elemento etiquetador existía en algún momento pero fue borrado o movido, y la referencia no se actualizó.
• El id existe en un documento diferente — aria-labelledby no puede referenciar elementos a través de páginas, iframes o límites de shadow DOM. El objetivo debe estar en el mismo documento.
• Contenido dinámico aún no renderizado — el elemento es insertado por JavaScript después de que el validador analiza el HTML estático.

Esto es principalmente un problema de accesibilidad. Los lectores de pantalla y otras tecnologías de asistencia dependen de aria-labelledby para anunciar etiquetas significativas a los usuarios. Cuando la referencia está rota, el elemento efectivamente no tiene nombre accesible, lo que puede hacer imposible que los usuarios entiendan su propósito. Los navegadores no mostrarán un error visible, por lo que el problema puede pasar desapercibido sin validación o pruebas de accesibilidad.

Para solucionar el problema, verifica que cada id referenciado en aria-labelledby existe en el mismo documento HTML. Revisa la ortografía y las mayúsculas/minúsculas. Si referencias múltiples IDs (separados por espacios), cada uno debe resolverse a un elemento existente.

Ejemplos

Incorrecto — referenciando un id inexistente

El atributo aria-labelledby apunta a "dialog-title", pero no existe ningún elemento con ese id:

<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dlg-title">Confirm deletion</h2>
  <p>Are you sure you want to delete this item?</p>
</div>

Correcto — valores de id coincidentes

Asegúrate de que el id en el elemento referenciado coincida exactamente:

<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm deletion</h2>
  <p>Are you sure you want to delete this item?</p>
</div>

Incorrecto — referenciando múltiples IDs donde uno falta

Cuando uses múltiples IDs, todos deben estar presentes. Aquí, "note-desc" no existe:

<section aria-labelledby="note-heading note-desc">
  <h3 id="note-heading">Important note</h3>
  <p id="note-description">Please read carefully before proceeding.</p>
</section>

Correcto — todos los IDs referenciados existen

<section aria-labelledby="note-heading note-description">
  <h3 id="note-heading">Important note</h3>
  <p id="note-description">Please read carefully before proceeding.</p>
</section>

Incorrecto — discrepancia de mayúsculas/minúsculas

Los IDs distinguen entre mayúsculas y minúsculas. "Main-Title" y "main-title" no son lo mismo:

<nav aria-labelledby="Main-Title">
  <h2 id="main-title">Site navigation</h2>
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>

Correcto — uso consistente de mayúsculas/minúsculas

<nav aria-labelledby="main-title">
  <h2 id="main-title">Site navigation</h2>
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>

Si no tienes un elemento etiquetador visible en la página y no quieres agregar uno, considera usar aria-label en su lugar, que acepta un valor de cadena directamente en lugar de referenciar otro elemento:

<nav aria-label="Site navigation">
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>

Más información:

MDN Reference

MDN: aria-labelledby

→