Validación HTML: El atributo "labelledby" no está permitido en el elemento "svg" en este punto.

Acerca de este problema HTML

El atributo aria-labelledby es parte de la especificación WAI-ARIA y proporciona un nombre accesible para un elemento haciendo referencia a los valores id de otros elementos que contienen el texto de etiquetado. Sin el prefijo aria-, labelledby es simplemente un atributo no reconocido que los navegadores y las tecnologías de asistencia ignorarán. Esto significa que tu gráfico SVG no tendrá la etiqueta accesible que pretendías, dejando a los usuarios de lectores de pantalla sin una descripción significativa del contenido.

Este problema es especialmente importante para elementos <svg> porque los gráficos SVG se usan a menudo para iconos, gráficos e ilustraciones que necesitan etiquetas descriptivas para la accesibilidad. Usar el nombre de atributo incorrecto significa que el gráfico está efectivamente sin etiquetar para usuarios que dependen de tecnología de asistencia.

Cómo solucionarlo

Reemplaza labelledby con aria-labelledby en tu elemento <svg>. El valor del atributo debe ser una lista separada por espacios de uno o más valores id que referencien elementos que contengan el texto de etiqueta.

Si quieres etiquetar un SVG usando texto que ya está visible en la página, aria-labelledby es el enfoque ideal. También puedes referenciar un elemento <title> dentro del propio SVG.

Ejemplos

❌ Incorrecto: 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>

✅ Correcto: Usar `aria-labelledby` para referenciar un encabezado externo

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

</svg>

✅ Correcto: Usar `aria-labelledby` para referenciar el propio `<title>` del 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>

✅ Correcto: Referenciar múltiples fuentes de etiquetas

Puedes combinar múltiples valores id para construir un nombre accesible compuesto, separados por espacios:

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

En este caso, un lector de pantalla anunciaría algo como “Revenue Q1 2024 revenue by region” como el nombre accesible para el SVG.

Consejos

Cuando uses aria-labelledby en <svg>, también agrega role="img" para asegurar un comportamiento consistente en los lectores de pantalla.
Si el SVG es puramente decorativo, usa aria-hidden="true" en lugar de etiquetarlo.
El atributo aria-labelledby anula otros mecanismos de etiquetado como aria-label o el elemento <title>, así que úsalo cuando quieras que una etiqueta específica tenga precedencia.