Validación HTML: Valor incorrecto "presentation" para el atributo "role" en el elemento "img"

Acerca de este problema HTML

La especificación HTML define una lista específica de roles ARIA permitidos para cada elemento. Para el elemento <img>, role="none" está permitido pero role="presentation" no aparece como un valor válido. Esta distinción existe aunque la especificación WAI-ARIA 1.1 trate none y presentation como sinónimos — role="none" se introdujo como un alias específicamente porque la palabra “presentation” a menudo era malentendida por los autores. La especificación HTML adoptó none como el valor canónico para <img>.

Por qué es importante

Cumplimiento de estándares: Usar un valor de role no permitido por la especificación HTML para un elemento dado produce un error de validación. Mantener tu HTML válido asegura un comportamiento predecible en navegadores y tecnologías asistivas.

Accesibilidad: El propósito previsto de role="presentation" o role="none" es decirle a las tecnologías asistivas que un elemento es puramente decorativo y no tiene significado semántico. Sin embargo, para imágenes, la forma establecida y más confiable de lograr esto es simplemente proporcionar un atributo alt vacío (alt=""). Los lectores de pantalla ya saben que deben omitir imágenes con alt="", por lo que agregar un role generalmente es innecesario.

Claridad de intención: Usar alt="" comunica claramente tanto a navegadores como a desarrolladores que la imagen es decorativa. Si la imagen realmente transmite información, debería tener un valor alt significativo y ningún role relacionado con presentación.

Cómo solucionarlo

Si la imagen es decorativa: Elimina el atributo role completamente y asegúrate de que la imagen tenga alt="". Este es el enfoque más simple y ampliamente soportado.
Si necesitas un role ARIA explícito: Reemplaza role="presentation" por role="none" y mantén alt="".
Si la imagen transmite significado: Elimina el role y proporciona un atributo alt descriptivo que explique qué comunica la imagen.

Ejemplos

❌ Incorrecto: usando `role="presentation"` en un `<img>`

<img src="divider.png" alt="" role="presentation">

Esto desencadena el error de validación porque presentation no es un valor de role permitido para <img> en la especificación HTML.

✅ Corregido: imagen decorativa con `alt` vacío (preferido)

<img src="divider.png" alt="">

El atributo alt vacío es suficiente para decirle a las tecnologías asistivas que la imagen es decorativa. No se necesita ningún role.

✅ Corregido: imagen decorativa con `role="none"`

<img src="divider.png" alt="" role="none">

Si necesitas explícitamente un role ARIA, role="none" es el valor válido para <img>. El alt vacío debería seguir incluido.

✅ Corregido: imagen significativa con `alt` descriptivo

<img src="quarterly-sales.png" alt="Gráfico de barras que muestra las ventas trimestrales aumentando de $2M a $5M en 2024">

Si la imagen comunica información, proporciona un alt descriptivo y no uses un role de presentation o none — hacerlo ocultaría el significado de la imagen a los usuarios de tecnologías asistivas.

❌ Incorrecto: imagen significativa incorrectamente oculta

<img src="quarterly-sales.png" alt="Gráfico de ventas" role="presentation">

Esto es tanto HTML inválido (valor de role incorrecto para <img>) como un problema de accesibilidad — el role intentaría ocultar una imagen significativa de los lectores de pantalla.