Verificação HTML: Valor inválido "" para o atributo "aria-labelledby" no elemento "a": Um valor IDREFS deve conter pelo menos um carácter não espaçado.

Sobre este problema HTML

O atributo aria-labelledby aceita um valor IDREFS — uma lista separada por espaços de um ou mais valores id que referenciam outros elementos no documento. O validador espera que cada ID na lista seja não vazio e contenha pelo menos um carácter não espaçado. Quando o atributo é definido como uma string vazia (aria-labelledby=""), viola esta restrição e despoleta o erro de validação.

Este problema surge frequentemente em sistemas de templates e frameworks JavaScript onde uma variável destinada a conter uma referência de ID resulta numa string vazia. Por exemplo, um template como aria-labelledby="{{ labelId }}" produzirá um atributo vazio se labelId for indefinido ou estiver em branco.

Porque é que isto importa

O atributo aria-labelledby é um dos métodos de maior prioridade para calcular o nome acessível de um elemento. De acordo com o algoritmo de cálculo de nome acessível, aria-labelledby sobrepõe-se a todas as outras fontes de nomes — incluindo conteúdo de texto visível, aria-label, e o atributo title. Quando aria-labelledby está presente mas vazio ou quebrado, os leitores de ecrã podem calcular o nome acessível do link como vazio, efetivamente tornando o link invisível ou sem significado para utilizadores de tecnologias assistivas. Um link sem nome acessível é uma barreira de acessibilidade significativa: os utilizadores não conseguem determinar para onde o link vai ou o que faz.

Além da acessibilidade, um aria-labelledby vazio também sinaliza HTML inválido de acordo com o padrão HTML vivo do WHATWG e a especificação WAI-ARIA, que definem o tipo IDREFS como requerendo pelo menos um token válido.

Como corrigir

Você tem várias opções dependendo da sua situação:

Referenciar um ID válido — Apontar aria-labelledby para o id de um elemento existente cujo conteúdo de texto deve servir como nome acessível do link.
Remover o atributo e usar texto de link visível — Se o link já contém texto descritivo, aria-labelledby é desnecessário.
Usar aria-label em vez disso — Para links apenas com ícones onde não existe elemento de etiqueta visível, aria-label fornece um nome acessível conciso diretamente no elemento.
Renderizar condicionalmente o atributo — Em templates, usar lógica condicional para omitir aria-labelledby completamente quando não há ID válido para referenciar, em vez de renderizar um valor vazio.

Exemplos

Inválido: `aria-labelledby` vazio

Isto despoleta o erro de validação porque o valor do atributo não contém caracteres não espaçados.

<a href="/report" aria-labelledby=""></a>

Inválido: `aria-labelledby` apenas com espaços

Um valor contendo apenas espaços é igualmente inválido — IDREFS requer pelo menos um token real.

<a href="/report" aria-labelledby="   "></a>

Corrigido: referenciar um elemento existente por `id`

O atributo aria-labelledby aponta para um <span> cujo conteúdo de texto se torna o nome acessível do link.

<a href="/report" aria-labelledby="report-link-text">
  <svg aria-hidden="true" viewBox="0 0 16 16"></svg>
</a>
<span id="report-link-text">Ver relatório</span>

Corrigido: referenciar múltiplos IDs

Você pode concatenar texto de múltiplos elementos listando os seus IDs separados por espaços. O nome acessível é construído juntando o texto referenciado por ordem.

<span id="action">Saber mais:</span>
<span id="subject">Maçãs</span>

<a href="/apples" aria-labelledby="action subject">
  <svg aria-hidden="true" viewBox="0 0 16 16"></svg>
</a>

Neste caso, o nome acessível calculado é “Saber mais: Maçãs”.

Corrigido: usar texto de link visível em vez disso

Quando o link já contém texto descritivo, não é necessário atributo ARIA. Esta é a abordagem mais simples e robusta.

<a href="/report">Ver relatório</a>

Corrigido: usar `aria-label` para um link apenas com ícone

Quando não há elemento de etiqueta visível separado para referenciar, aria-label fornece o nome acessível diretamente.

<a href="/search" aria-label="Pesquisar">
  <svg aria-hidden="true" viewBox="0 0 16 16"></svg>
</a>

Corrigido: renderização condicional num template

Se estiver a usar um motor de templates, inclua condicionalmente o atributo apenas quando existe um valor. A sintaxe exata varia por framework, mas aqui está a ideia geral:

<!-- Em vez de renderizar sempre o atributo: -->

<!-- <a href="/report" aria-labelledby="{{ labelId }}"> -->


<!-- Renderize apenas quando labelId tem um valor: -->

<!-- <a href="/report" {{#if labelId}}aria-labelledby="{{labelId}}"{{/if}}> -->

Isto previne o problema do atributo vazio na origem em vez de o corrigir após o facto.