El role “img” es innecesario para el elemento “img”.

Cada elemento HTML tiene un role ARIA implícito definido por la especificación HTML. El role implícito del elemento <img> es img, lo que significa que las tecnologías de asistencia como los lectores de pantalla ya lo reconocen como una imagen sin necesidad de atributos ARIA adicionales. Añadir role="img" explícitamente no cambia el comportamiento — solo añade ruido innecesario a tu marcado y señala que el autor puede no entender cómo funcionan las semánticas nativas.

El validador de W3C marca esto porque viola la primera regla de ARIA: no uses ARIA si puedes usar un elemento HTML nativo o atributo que ya tenga las semánticas que necesitas. Los roles redundantes saturan tu código, hacen que el mantenimiento sea más difícil, y pueden confundir a otros desarrolladores haciéndoles pensar que el role está ahí por una razón específica.

El atributo role="img" es genuinamente útil en otros contextos — por ejemplo, cuando quieres agrupar múltiples elementos juntos y hacer que sean tratados como una sola imagen por las tecnologías de asistencia. Un <div> o <span> no tiene un role img implícito, por lo que añadir role="img" a un contenedor es significativo y apropiado.

Cómo solucionarlo

Simplemente elimina el atributo role="img" de cualquier elemento <img>. Las semánticas de imagen ya están incorporadas. Asegúrate de seguir proporcionando un atributo alt significativo para la accesibilidad.

Ejemplos

❌ Role redundante en <img>

<img src="photo.jpg" alt="A sunset over the ocean" role="img">

El validador advertirá: The “img” role is unnecessary for element “img”.

✅ Corregido: Elimina el role redundante

<img src="photo.jpg" alt="A sunset over the ocean">

No se necesita ningún role explícito. El navegador ya comunica este elemento como una imagen.

✅ Uso legítimo de role="img" en un elemento que no es imagen

El atributo role="img" es apropiado cuando se aplica a un contenedor que agrupa múltiples elementos en una sola imagen conceptual:

<div role="img" aria-label="Star rating: 4 out of 5">
  <span>⭐</span>
  <span>⭐</span>
  <span>⭐</span>
  <span>⭐</span>
  <span>☆</span>
</div>

Aquí, el <div> no tiene semánticas de imagen inherentes, por lo que role="img" es significativo — les dice a las tecnologías de asistencia que traten todo el grupo como una sola imagen descrita por el aria-label.

✅ Otro uso legítimo: imagen de fondo CSS con role="img"

<div role="img" aria-label="Company logo" class="logo-background"></div>

Dado que un <div> estilizado con una imagen de fondo CSS no tiene semánticas de imagen, role="img" emparejado con aria-label asegura que el contenido visual sea accesible.

Más información:

MDN Reference

MDN: ARIA img role

→