Verificação HTML: A função "img" é desnecessária para o elemento "img".

Sobre este problema HTML

Cada elemento HTML tem uma função ARIA implícita definida pela especificação HTML. A função implícita do elemento <img> é img, o que significa que as tecnologias assistivas como leitores de ecrã já o reconhecem como uma imagem sem quaisquer atributos ARIA adicionais. Adicionar role="img" explicitamente não altera o comportamento — apenas adiciona ruído desnecessário à sua marcação e sinaliza que o autor pode não entender como funcionam as semânticas nativas.

O validador W3C sinaliza isto porque viola a primeira regra do ARIA: não use ARIA se pode usar um elemento ou atributo HTML nativo que já tem as semânticas de que precisa. Funções redundantes tornam o seu código confuso, dificultam a manutenção e podem confundir outros programadores fazendo-os pensar que a função está lá por uma razão específica.

O atributo role="img" é genuinamente útil noutros contextos — por exemplo, quando quer agrupar múltiplos elementos juntos e fazer com que sejam tratados como uma única imagem pelas tecnologias assistivas. Um <div> ou <span> não tem função img implícita, portanto adicionar role="img" a um contentor é significativo e apropriado.

Como corrigir

Simplesmente remova o atributo role="img" de qualquer elemento <img>. As semânticas da imagem já estão incorporadas. Certifique-se de que ainda fornece um atributo alt significativo para acessibilidade.

Exemplos

❌ Função redundante em `<img>`

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

O validador avisará: The “img” role is unnecessary for element “img”.

✅ Corrigido: remover a função redundante

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

Não é necessária uma função explícita. O navegador já comunica este elemento como uma imagem.

✅ Uso legítimo de `role="img"` num elemento que não é imagem

O atributo role="img" é apropriado quando aplicado a um contentor que agrupa múltiplos elementos numa única imagem conceptual:

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

Aqui, o <div> não tem semânticas de imagem inerentes, portanto role="img" é significativo — informa as tecnologias assistivas para tratarem todo o grupo como uma única imagem descrita pelo aria-label.

✅ Outro uso legítimo: imagem de fundo CSS com `role="img"`

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

Uma vez que um <div> estilizado com uma imagem de fundo CSS não tem semânticas de imagem, role="img" emparelhado com aria-label garante que o conteúdo visual é acessível.