← Todas as regras

Alternativas textuais

Elementos com role="img" precisam de nome

• Regra: role-img-alt
• Gravidade: Grave
• Nível WCAG A

Por que isso importa

role="img" avisa a tecnologia assistiva que “isto é uma imagem” e depois não oferece nada a dizer sobre ela. Uma avaliação em estrelas desenhada em CSS vira uma imagem anunciada e vazia.

Como corrigir

1. Acrescente aria-label descrevendo o que a composição transmite (“Avaliado 4 de 5”).
2. Use aria-labelledby quando a descrição já existir como texto visível.
3. Se for puramente decorativo, remova role="img" e acrescente aria-hidden="true".

Na marcação

<div role="img" class="star-rating"></div>

<div role="img" class="star-rating" aria-label="Rated 4 out of 5"></div>

A exigência por trás disso

Esta regra é uma das formas de falhar nos seguintes critérios de sucesso das WCAG 2.2. O W3C, que publica a norma, explica cada um deles:

• 1.1.1 Conteúdo não textual (abre em nova aba) — Nível WCAG A

Para aprofundar

Deque University sobre role-img-alt (abre em nova aba)

A Deque mantém o axe-core, o motor de código aberto que o nosso scanner executa. A página deles documenta a regra como o motor a implementa.

Verificações automáticas encontram falhas que o navegador consegue comprovar. Elas não julgam se uma legenda está correta, se um texto alternativo é útil, nem se a página pode ser operada de ponta a ponta pelo teclado — isso exige uma pessoa.