Verificação HTML: Valor inválido "presentation" para o atributo "role" no elemento "img"

Sobre este problema HTML

A especificação HTML define uma lista específica de roles ARIA permitidos para cada elemento. Para o elemento <img>, role="none" é permitido mas role="presentation" não está listado como um valor válido. Esta distinção existe mesmo que a especificação WAI-ARIA 1.1 trate none e presentation como sinónimos — role="none" foi introduzido como um alias especificamente porque a palavra “presentation” era frequentemente mal interpretada pelos autores. A especificação HTML adotou none como o valor canónico para <img>.

Por que isto é importante

Conformidade com padrões: Usar um valor de role que não é permitido pela especificação HTML para um determinado elemento produz um erro de validação. Manter o seu HTML válido garante comportamento previsível em navegadores e tecnologias de apoio.

Acessibilidade: O propósito pretendido de role="presentation" ou role="none" é dizer às tecnologias de apoio que um elemento é puramente decorativo e não carrega significado semântico. No entanto, para imagens, a forma estabelecida e mais confiável de alcançar isto é simplesmente fornecer um atributo alt vazio (alt=""). Os leitores de ecrã já sabem para ignorar imagens com alt="", por isso adicionar um role é normalmente desnecessário.

Clareza de intenção: Usar alt="" comunica claramente tanto aos navegadores quanto aos programadores que a imagem é decorativa. Se a imagem realmente transmite informação, deve ter um valor alt significativo e nenhum role relacionado com apresentação.

Como corrigir

Se a imagem é decorativa: Remova o atributo role inteiramente e certifique-se de que a imagem tem alt="". Esta é a abordagem mais simples e amplamente suportada.
Se você precisa de um role ARIA explícito: Substitua role="presentation" por role="none" e mantenha alt="".
Se a imagem transmite significado: Remova o role e forneça um atributo alt descritivo que explique o que a imagem comunica.

Exemplos

❌ Incorreto: usar `role="presentation"` num `<img>`

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

Isto desencadeia o erro de validação porque presentation não é um valor de role permitido para <img> na especificação HTML.

✅ Corrigido: imagem decorativa com `alt` vazio (preferido)

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

O atributo alt vazio é suficiente para dizer às tecnologias de apoio que a imagem é decorativa. Nenhum role é necessário.

✅ Corrigido: imagem decorativa com `role="none"`

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

Se você explicitamente precisa de um role ARIA, role="none" é o valor válido para <img>. O alt vazio deve ainda ser incluído.

✅ Corrigido: imagem significativa com `alt` descritivo

<img src="quarterly-sales.png" alt="Gráfico de barras mostrando vendas trimestrais aumentando de $2M para $5M em 2024">

Se a imagem comunica informação, forneça um alt descritivo e não use um role presentation ou none — fazer isso esconderia o significado da imagem dos utilizadores de tecnologia de apoio.

❌ Incorreto: imagem significativa incorretamente oculta

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

Isto é tanto HTML inválido (valor de role errado para <img>) quanto um problema de acessibilidade — o role tentaria esconder uma imagem significativa dos leitores de ecrã.