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

Sobre este problema HTML

O atributo aria-labelledby é um atributo IDREFS, o que significa que o seu valor deve ser uma lista separada por espaços de um ou mais valores id que existam no documento. Estes elementos referenciados fornecem coletivamente o nome acessível para o elemento. Quando o valor é uma string vazia ("") ou contém apenas espaços em branco, não há referências de ID válidas, o que viola o requisito IDREFS definido nas especificações WAI-ARIA e HTML.

Este problema aparece frequentemente quando sistemas de templates ou frameworks JavaScript definem condicionalmente aria-labelledby mas produzem uma string vazia quando nenhum ID de etiqueta está disponível. Também ocorre quando programadores adicionam o atributo como placeholder com a intenção de o preencher mais tarde mas esquecem-se de o fazer.

Por que isto é importante

Um aria-labelledby vazio é problemático por várias razões:

Acessibilidade: Os leitores de ecrã dependem de aria-labelledby para anunciar o nome acessível de um elemento. Um valor vazio pode causar comportamento imprevisível — alguns leitores de ecrã podem ignorar completamente o SVG, enquanto outros podem recorrer a ler conteúdo inútil ou nada. Isto deixa os utilizadores que dependem de tecnologia assistiva sem uma descrição significativa do gráfico.
Conformidade com padrões: O validador W3C marca isto como um erro porque a especificação HTML requer que atributos IDREFS contenham pelo menos um carácter não vazio. Publicar HTML inválido pode sinalizar problemas de qualidade mais amplos e pode causar problemas em ambientes de análise rigorosos.
Manutenibilidade: Um aria-labelledby vazio é ambíguo. Não está claro se o programador pretendia que o SVG fosse decorativo, esqueceu-se de adicionar uma referência, ou encontrou um bug na sua lógica de templates.

Como corrigir

Escolha a abordagem que corresponde à sua intenção:

Referencie um elemento de etiqueta por ID: Se o SVG transmite significado, adicione um elemento <title> (ou outro elemento de texto visível) dentro ou perto do SVG com um id único, depois defina aria-labelledby para esse id. Os IDs são sensíveis a maiúsculas e minúsculas, por isso garanta uma correspondência exata.
Use aria-label em vez disso: Se quer fornecer um nome acessível diretamente como uma string de texto sem precisar de um elemento separado, substitua aria-labelledby por aria-label.
Remova o atributo: Se o SVG já tem um nome acessível através de outros meios (como texto adjacente visível ou um filho <title> que não precisa de referenciação explícita), simplesmente remova o aria-labelledby vazio.
Marque como decorativo: Se o SVG é puramente decorativo e não adiciona informação, remova aria-labelledby e adicione aria-hidden="true" para que a tecnologia assistiva o ignore completamente.

Ao gerar aria-labelledby dinamicamente, garanta que o seu código omite o atributo completamente em vez de produzir um valor vazio quando nenhum ID de etiqueta está disponível.

Exemplos

❌ `aria-labelledby` vazio (desencadeia o erro)

<svg role="img" aria-labelledby="">
  <use href="#icon-star"></use>
</svg>

A string vazia não é um valor IDREFS válido, por isso o validador reporta um erro.

✅ Referencie um elemento `<title>` por ID

<svg role="img" aria-labelledby="star-title">
  <title id="star-title">Favorito</title>
  <use href="#icon-star"></use>
</svg>

O aria-labelledby aponta para o id do elemento <title>, dando ao SVG um nome acessível claro de “Favorito.”

✅ Use `aria-label` com uma string de texto

<svg role="img" aria-label="Favorito">
  <use href="#icon-star"></use>
</svg>

Quando não precisa de referenciar outro elemento, aria-label fornece o nome acessível diretamente como um valor de atributo.

✅ Referencie múltiplos elementos de etiqueta

<svg role="img" aria-labelledby="star-title star-desc">
  <title id="star-title">Favorito</title>
  <desc id="star-desc">Um ícone de estrela de cinco pontas</desc>
  <use href="#icon-star"></use>
</svg>

O valor aria-labelledby pode incluir múltiplos IDs separados por espaços. O nome acessível é construído concatenando o conteúdo de texto dos elementos referenciados por ordem.

✅ SVG decorativo (nenhum nome acessível necessário)

<svg aria-hidden="true" focusable="false">
  <use href="#icon-decorative-divider"></use>
</svg>

Para gráficos puramente decorativos, aria-hidden="true" remove o elemento da árvore de acessibilidade. Adicionar focusable="false" impede que o SVG receba foco de teclado em versões mais antigas do Internet Explorer e Edge.