Validación HTML: Valor incorrecto "" para el atributo "aria-labelledby" en el elemento "svg": Un valor IDREFS debe contener al menos un carácter que no sea un espacio en blanco.

Acerca de este problema HTML

El atributo aria-labelledby es un atributo IDREFS, lo que significa que su valor debe ser una lista separada por espacios de uno o más valores id que existan en el documento. Estos elementos referenciados proporcionan colectivamente el nombre accesible para el elemento. Cuando el valor es una cadena vacía ("") o contiene solo espacios en blanco, no hay referencias ID válidas, lo que viola el requisito IDREFS definido en las especificaciones WAI-ARIA y HTML.

Este problema aparece comúnmente cuando los sistemas de plantillas o frameworks de JavaScript establecen condicionalmente aria-labelledby pero generan una cadena vacía cuando no hay un ID de etiqueta disponible. También ocurre cuando los desarrolladores añaden el atributo como marcador de posición con la intención de completarlo más tarde pero olvidan hacerlo.

Por qué esto importa

Un aria-labelledby vacío es problemático por varias razones:

Accesibilidad: Los lectores de pantalla dependen de aria-labelledby para anunciar el nombre accesible de un elemento. Un valor vacío puede causar comportamientos impredecibles: algunos lectores de pantalla pueden ignorar el SVG completamente, mientras que otros pueden recurrir a leer contenido no útil o no anunciar nada. Esto deja a los usuarios que dependen de tecnología asistiva sin una descripción significativa del gráfico.
Cumplimiento de estándares: El validador de W3C marca esto como error porque la especificación HTML requiere que los atributos IDREFS contengan al menos un carácter que no sea espacio en blanco. Publicar HTML inválido puede indicar problemas de calidad más amplios y puede causar problemas en entornos de análisis estrictos.
Mantenibilidad: Un aria-labelledby vacío es ambiguo. No está claro si el desarrollador pretendía que el SVG fuera decorativo, olvidó añadir una referencia, o encontró un error en su lógica de plantillas.

Cómo solucionarlo

Elige el enfoque que coincida con tu intención:

Referencia un elemento de etiquetado por ID: Si el SVG transmite significado, añade un elemento <title> (u otro elemento de texto visible) dentro o cerca del SVG con un id único, luego establece aria-labelledby a ese id. Los IDs distinguen entre mayúsculas y minúsculas, así que asegúrate de que coincidan exactamente.
Usa aria-label en su lugar: Si quieres proporcionar un nombre accesible directamente como una cadena de texto sin necesidad de un elemento separado, reemplaza aria-labelledby con aria-label.
Elimina el atributo: Si el SVG ya tiene un nombre accesible a través de otros medios (como texto adyacente visible o un hijo <title> que no necesita referencia explícita), simplemente elimina el aria-labelledby vacío.
Marca como decorativo: Si el SVG es puramente decorativo y no añade información, elimina aria-labelledby y añade aria-hidden="true" para que la tecnología asistiva lo omita completamente.

Cuando generes aria-labelledby dinámicamente, asegúrate de que tu código omita completamente el atributo en lugar de generar un valor vacío cuando no haya un ID de etiqueta disponible.

Ejemplos

❌ `aria-labelledby` vacío (provoca el error)

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

La cadena vacía no es un valor IDREFS válido, por lo que el validador reporta un error.

✅ Referencia un elemento `<title>` por ID

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

El aria-labelledby apunta al id del elemento <title>, dando al SVG un nombre accesible claro de “Favorite”.

✅ Usa `aria-label` con una cadena de texto

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

Cuando no necesitas hacer referencia a otro elemento, aria-label proporciona el nombre accesible directamente como un valor de atributo.

✅ Referencia múltiples elementos de etiquetado

<svg role="img" aria-labelledby="star-title star-desc">
  <title id="star-title">Favorite</title>
  <desc id="star-desc">A five-pointed star icon</desc>
  <use href="#icon-star"></use>
</svg>

El valor de aria-labelledby puede incluir múltiples IDs separados por espacios. El nombre accesible se construye concatenando el contenido de texto de los elementos referenciados en orden.

✅ SVG decorativo (no necesita nombre accesible)

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

Para gráficos puramente decorativos, aria-hidden="true" elimina el elemento del árbol de accesibilidad. Añadir focusable="false" evita que el SVG reciba el foco del teclado en versiones anteriores de Internet Explorer y Edge.