Validación HTML: Un elemento "img" que tiene un atributo "alt" cuyo valor es una cadena vacía no debe tener un atributo "role".

Acerca de este problema HTML

Un atributo alt vacío en un elemento img es una señal deliberada de que la imagen es puramente decorativa y no contiene contenido significativo. Según la especificación HTML de WHATWG, esto mapea el elemento al rol “presentation” en el árbol de accesibilidad, ocultándolo efectivamente de los lectores de pantalla y otras tecnologías de asistencia.

Cuando añades un atributo role a un img con alt="", estás enviando instrucciones contradictorias: el alt vacío dice “esta imagen es decorativa, ignórala”, mientras que el atributo role dice “esta imagen tiene un propósito semántico específico”. Los navegadores y tecnologías de asistencia no pueden resolver de manera fiable este conflicto, lo que puede llevar a un comportamiento confuso o inconsistente para usuarios que dependen de lectores de pantalla.

Esta regla existe para forzar claridad en cómo las imágenes se exponen al árbol de accesibilidad. Si una imagen es verdaderamente decorativa, debe tener alt="" y ningún role. Si una imagen cumple un propósito funcional o semántico — como actuar como un botón, enlace o ilustración — debe tener tanto un valor alt descriptivo como, si es necesario, un role apropiado.

Cómo solucionarlo

Tienes dos opciones dependiendo del propósito de la imagen:

La imagen es decorativa: Elimina completamente el atributo role. El atributo alt vacío ya comunica que la imagen debe ser ignorada por las tecnologías de asistencia.
La imagen es significativa: Proporciona un valor alt descriptivo que explique el propósito de la imagen. Si realmente se necesita un role específico, manténlo junto al alt no vacío.

Ejemplos

❌ Incorrecto: `alt` vacío con un atributo `role`

<img src="icon.png" alt="" role="img">

<img src="banner.jpg" alt="" role="presentation">

Incluso role="presentation" es redundante e inválido aquí — el alt vacío ya implica semántica de presentación.

✅ Correcto: imagen decorativa sin `role`

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

Si la imagen es decorativa, simplemente elimina el atributo role. El alt vacío es suficiente.

✅ Correcto: imagen significativa con un `alt` descriptivo y un `role`

<img src="warning-icon.png" alt="Advertencia" role="img">

Si la imagen transmite información, dale un valor alt descriptivo. El role="img" es típicamente innecesario aquí ya que los elementos img ya tienen un role implícito de img cuando alt no está vacío, pero al menos es válido.

✅ Correcto: imagen significativa usada en un contexto específico

<button>
  <img src="search-icon.png" alt="Buscar">
</button>

Aquí la imagen tiene un alt descriptivo y no necesita un role explícito porque su propósito se transmite a través del texto alt y su contexto dentro del button.