Verificação HTML: Atributo "labelledby" não é permitido no elemento "svg" neste ponto.

Sobre este problema HTML

O atributo aria-labelledby faz parte da especificação WAI-ARIA e fornece um nome acessível para um elemento ao referenciar os valores de id de outros elementos que contêm o texto da etiqueta. Sem o prefixo aria-, labelledby é simplesmente um atributo não reconhecido que os navegadores e tecnologias assistivas irão ignorar. Isto significa que o seu gráfico SVG não terá a etiqueta acessível que pretendia, deixando os utilizadores de leitores de ecrã sem uma descrição significativa do conteúdo.

Esta questão é especialmente importante para elementos <svg> porque os gráficos SVG são frequentemente usados para ícones, gráficos e ilustrações que necessitam de etiquetas descritivas para acessibilidade. Usar o nome de atributo incorreto significa que o gráfico fica efetivamente sem etiqueta para utilizadores que dependem de tecnologia assistiva.

Como corrigir

Substitua labelledby por aria-labelledby no seu elemento <svg>. O valor do atributo deve ser uma lista separada por espaços de um ou mais valores de id que referenciam elementos contendo o texto da etiqueta.

Se quiser etiquetar um SVG usando texto que já está visível na página, aria-labelledby é a abordagem ideal. Também pode referenciar um elemento <title> dentro do próprio SVG.

Exemplos

❌ Incorreto: usar `labelledby` (atributo inválido)

<h2 id="chart-title">Monthly Sales</h2>
<svg labelledby="chart-title" role="img" viewBox="0 0 200 100">
<!-- chart content -->

</svg>

✅ Correto: usar `aria-labelledby` para referenciar um cabeçalho externo

<h2 id="chart-title">Monthly Sales</h2>
<svg aria-labelledby="chart-title" role="img" viewBox="0 0 200 100">
<!-- chart content -->

</svg>

✅ Correto: usar `aria-labelledby` para referenciar o `<title>` do próprio SVG

<svg aria-labelledby="icon-title" role="img" viewBox="0 0 24 24">
  <title id="icon-title">Search</title>
  <path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5z"/>
</svg>

✅ Correto: referenciar múltiplas fontes de etiqueta

Pode combinar múltiplos valores de id para construir um nome acessível composto, separados por espaços:

<h2 id="section-title">Revenue</h2>
<p id="section-desc">Q1 2024 revenue by region</p>
<svg aria-labelledby="section-title section-desc" role="img" viewBox="0 0 400 200">
<!-- chart content -->

</svg>

Neste caso, um leitor de ecrã anunciaria algo como “Revenue Q1 2024 revenue by region” como o nome acessível para o SVG.

Dicas

Quando usar aria-labelledby em <svg>, adicione também role="img" para garantir comportamento consistente entre leitores de ecrã.
Se o SVG for puramente decorativo, use aria-hidden="true" em vez de o etiquetar.
O atributo aria-labelledby sobrepõe-se a outros mecanismos de etiquetagem como aria-label ou o elemento <title>, por isso use-o quando quiser que uma etiqueta específica tenha precedência.