Valor incorrecto “icon” para el atributo “role” en el elemento “span”.

La especificación WAI-ARIA define un conjunto específico de valores de role que las tecnologías de asistencia como los lectores de pantalla comprenden. Estos incluyen roles como button, checkbox, alert, dialog, img, navigation, banner, y muchos otros. El valor "icon" no está entre ellos. Cuando un navegador o tecnología de asistencia encuentra un role no reconocido, no puede determinar el propósito del elemento, lo que anula el objetivo de usar ARIA en primer lugar.

Este es principalmente un problema de accesibilidad. Los lectores de pantalla dependen de roles ARIA válidos para comunicar la naturaleza de los elementos a los usuarios. Un role inválido como "icon" es ignorado o causa comportamiento impredecible, dejando a los usuarios de tecnologías de asistencia sin el contexto que necesitan. También es un problema de cumplimiento de estándares — el validador de W3C marca esto porque la especificación HTML requiere que los valores de role coincidan con roles definidos en la especificación ARIA.

La solución depende del propósito del elemento:

• Iconos decorativos (que no transmiten información): Elimina completamente el atributo role, o usa aria-hidden="true" para ocultar explícitamente el elemento del árbol de accesibilidad.
• Iconos significativos (que transmiten información visualmente): Usa role="img" junto con un aria-label para proporcionar una alternativa de texto.
• Iconos dentro de elementos interactivos: Oculta el icono con aria-hidden="true" y asegúrate de que el elemento interactivo padre tenga un nombre accesible a través de texto visible o un aria-label.

Ejemplos

❌ Inválido: Usando el role inexistente "icon"

<span class="icon" role="icon"></span>

Esto desencadena el error de validación porque "icon" no es un role ARIA válido.

✅ Corregido: Icono decorativo sin role

Si el icono es puramente decorativo y no transmite ningún significado (ej.: está junto a texto que ya describe la acción), simplemente elimina el atributo role. Añadir aria-hidden="true" asegura que los lectores de pantalla lo omitan completamente.

<span class="icon" aria-hidden="true"></span>

✅ Corregido: Icono significativo usando role="img"

Si el icono transmite información significativa que no está disponible a través del texto circundante, usa role="img" y proporciona un aria-label descriptivo:

<span class="icon-warning" role="img" aria-label="Advertencia"></span>

Esto le dice a las tecnologías de asistencia que el elemento representa una imagen y le da un nombre accesible de “Advertencia”.

✅ Corregido: Icono dentro de un botón

Cuando un icono se coloca dentro de un elemento interactivo como un botón, oculta el icono del árbol de accesibilidad y deja que el texto o etiqueta del botón proporcione el significado:

<button>
  <span class="icon-save" aria-hidden="true"></span>
  Guardar
</button>

Si el botón no tiene texto visible (un botón solo con icono), proporciona un aria-label en el propio botón:

<button aria-label="Guardar">
  <span class="icon-save" aria-hidden="true"></span>
</button>

✅ Corregido: Icono usando un elemento <img> en su lugar

Si estás usando un archivo de imagen real para el icono, considera usar un elemento semántico <img>, que tiene un role img incorporado:

<img src="icon-alert.svg" alt="Alerta" class="icon">

Para iconos de imagen decorativos, usa un atributo alt vacío:

<img src="icon-decorative.svg" alt="" class="icon">

Más información:

MDN Reference

MDN: WAI-ARIA Roles

→