O atributo “aria-labelledby” deve apontar para um elemento no mesmo documento.

O atributo aria-labelledby cria uma relação entre um elemento e o conteúdo de texto que o rotula. Funciona apontando para o id de um ou mais elementos cujo texto deve ser usado como o nome acessível. Quando o validador reporta que aria-labelledby deve apontar para um elemento no mesmo documento, significa que pelo menos um dos valores de id que você referenciou não corresponde a qualquer elemento na página.

Isto acontece tipicamente por alguns motivos:

• Erro de digitação no id — o valor aria-labelledby não corresponde exatamente ao id do elemento alvo (lembre-se, os IDs são sensíveis a maiúsculas e minúsculas).
• O elemento referenciado foi removido — o elemento rotulador existiu em algum momento mas foi apagado ou movido, e a referência não foi atualizada.
• O id existe num documento diferente — aria-labelledby não pode referenciar elementos entre páginas, iframes, ou fronteiras de shadow DOM. O alvo deve estar no mesmo documento.
• Conteúdo dinâmico ainda não renderizado — o elemento é inserido por JavaScript depois do validador analisar o HTML estático.

Este é principalmente um problema de acessibilidade. Leitores de ecrã e outras tecnologias assistivas dependem de aria-labelledby para anunciar rótulos significativos aos utilizadores. Quando a referência está quebrada, o elemento efetivamente não tem nome acessível, o que pode tornar impossível para os utilizadores entender o seu propósito. Os navegadores não lançarão um erro visível, por isso o problema pode passar despercebido sem validação ou testes de acessibilidade.

Para corrigir o problema, verifique que cada id referenciado em aria-labelledby existe no mesmo documento HTML. Verifique duas vezes a ortografia e o uso de maiúsculas. Se referenciar múltiplos IDs (separados por espaços), cada um deve resolver para um elemento existente.

Exemplos

Incorreto — referenciando um id inexistente

O atributo aria-labelledby aponta para "dialog-title", mas não existe qualquer elemento com esse 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>

Correto — valores de id correspondentes

Certifique-se de que o id no elemento referenciado corresponde exatamente:

<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>

Incorreto — referenciando múltiplos IDs onde um está em falta

Quando usar múltiplos IDs, cada um deve estar presente. Aqui, "note-desc" não 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>

Correto — todos os IDs referenciados existem

<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>

Incorreto — incompatibilidade de maiúsculas

Os IDs são sensíveis a maiúsculas e minúsculas. "Main-Title" e "main-title" não são o mesmo:

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

Correto — uso consistente de maiúsculas

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

Se não tem um elemento rotulador visível na página e não quer adicionar um, considere usar aria-label em vez disso, que aceita um valor de string diretamente em vez de referenciar outro elemento:

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

Saiba mais:

MDN Reference

MDN: aria-labelledby

→