alt vazio e a imagem decorativa oculta

Para imagens decorativas, a escolha correta é um texto alternativo vazio: escreva alt igual a duas aspas, sem nada dentro.

Um texto alternativo vazio marca a imagem como decorativa, para que os leitores de tela a ignorem completamente e nunca a anunciem.

Texto alternativo vazio e texto alternativo ausente são completamente diferentes. Vazio significa “ignore-me de propósito”; ausente significa que o autor se esqueceu.

Sem nenhum texto alternativo, muitos leitores de tela recorrem à leitura do nome do arquivo em voz alta, como IMG sublinhado 4823 ponto jpg.

A regra é simples: todo img precisa de um atributo alternativo. A única questão é se ele estará vazio ou preenchido.

Espaçadores visuais, linhas e divisores não transmitem significado, portanto são exemplos perfeitos para um texto alternativo vazio.

Não coloque um espaço entre as aspas. Um texto alternativo realmente vazio não tem nada dentro, nem mesmo um único espaço.

Se uma imagem for realmente decorativa, muitas vezes a solução mais limpa é uma imagem de fundo em CSS, que é completamente ignorada pela árvore de acessibilidade.

Você também pode ocultar um gráfico decorativo definindo aria-hidden como verdadeiro, algo comum em ícones SVG incorporados ao lado de texto visível.

Tenha cuidado: nunca use um texto alternativo vazio ou aria-hidden em uma imagem informativa, ou você a eliminará silenciosamente para alguns usuários.

Se uma imagem decorativa estiver dentro de um link, o link ainda precisará de texto acessível em algum lugar, ou ficará sem nome.

Muito bem! O texto alternativo vazio oculta intencionalmente a decoração, a ausência do texto alternativo é um erro, e aria-hidden ou imagens de fundo em CSS também mantêm os ornamentos silenciosos.