Verificação HTML: Um elemento "img" que tem um atributo "alt" cujo valor é uma string vazia não deve ter um atributo "role".

Sobre este problema HTML

Um atributo alt vazio num elemento img é um sinal deliberado de que a imagem é puramente decorativa e não carrega conteúdo significativo. De acordo com a especificação HTML do WHATWG, isto mapeia o elemento para o role “presentation” na árvore de acessibilidade, efetivamente ocultando-o de leitores de ecrã e outras tecnologias de assistência.

Quando você adiciona um atributo role a um img com alt="", está a enviar instruções contraditórias: o alt vazio diz “esta imagem é decorativa, ignore-a,” enquanto o atributo role diz “esta imagem tem um propósito semântico específico.” Os navegadores e tecnologias de assistência não conseguem resolver este conflito de forma fiável, o que pode levar a comportamentos confusos ou inconsistentes para utilizadores que dependem de leitores de ecrã.

Esta regra existe para impor clareza na forma como as imagens são expostas à árvore de acessibilidade. Se uma imagem é verdadeiramente decorativa, deve ter alt="" e nenhum role. Se uma imagem serve um propósito funcional ou semântico — como atuar como um botão, link ou ilustração — deve ter tanto um valor alt descritivo quanto, se necessário, um role apropriado.

Como corrigir

Você tem duas opções dependendo do propósito da imagem:

A imagem é decorativa: Remova o atributo role completamente. O atributo alt vazio já comunica que a imagem deve ser ignorada pelas tecnologias de assistência.
A imagem é significativa: Forneça um valor alt descritivo que explique o propósito da imagem. Se um role específico for genuinamente necessário, mantenha-o junto com o alt não vazio.

Exemplos

❌ Incorreto: `alt` vazio com um atributo `role`

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

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

Mesmo role="presentation" é redundante e inválido aqui — o alt vazio já implica semântica de apresentação.

✅ Correto: imagem decorativa sem `role`

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

Se a imagem é decorativa, simplesmente remova o atributo role. O alt vazio é suficiente.

✅ Correto: imagem significativa com um `alt` descritivo e um `role`

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

Se a imagem transmite informação, dê-lhe um valor alt descritivo. O role="img" é tipicamente desnecessário aqui uma vez que elementos img já têm um role implícito de img quando alt não está vazio, mas é pelo menos válido.

✅ Correto: imagem significativa usada num contexto específico

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

Aqui a imagem tem um alt descritivo e não precisa de um role explícito porque o seu propósito é transmitido através do texto alt e do seu contexto dentro do button.