Texto alternativo para imagens decorativas
O que a norma pede
Imagens só decorativas têm texto alternativo vazio ou são implementadas de modo que a tecnologia assistiva as ignore.
- 1.1.1 (A)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Marque no protótipo as imagens que só enfeitam, como ilustrações de fundo e separadores. Na dúvida, pergunte se a tela perde informação quando a imagem some.
Ícone ao lado do título
Cada card tem um ícone e o nome do serviço.
Errado: Ícone descrito
alt redundanteNa especificação
Ícone de casa — alt: “ícone de casa”, ao lado do texto “Habitação”.
O leitor repete informação sem valor.
Certo: Ícone marcado como decorativo
alt vazioNa especificação
Ícone de casa — decorativo; o texto “Habitação” já nomeia o card.
O leitor vai direto ao que importa.
Use alt="" nas imagens decorativas, sem omitir o atributo, e aria-hidden="true" nos SVG decorativos. Sempre que puder, coloque enfeites no CSS.
Ilustração do topo da página
Uma ilustração abstrata enfeita o banner.
Errado: Sem o atributo alt
<img src="ondas-decorativas.png">O leitor anuncia “ondas-decorativas.png”.
Certo: Alt vazio
<img src="ondas-decorativas.png" alt="">A ilustração é ignorada pelo leitor.
Inclua no padrão de conteúdo a opção de marcar uma imagem como decorativa e oriente quem publica sobre quando usá-la. Descrever enfeites deixa a navegação por leitor de tela lenta e cansativa.
Página inicial com ícones
A página tem 20 cards com ícone e título.
Errado: Todos os ícones descritos
Situação
O leitor anuncia 20 descrições de ícones antes dos títulos.
Navegar vira um esforço cansativo.
Certo: Ícones silenciados
Situação
Ícones com alt vazio; o leitor anuncia só os títulos.
A navegação é rápida.
Com o leitor de tela, confirme que as imagens decorativas são puladas. Se alguma for anunciada pelo nome do arquivo ou por uma descrição, registre o defeito.
Card de serviço
O leitor de tela chega a um card com ícone e título.
Errado: Enfeite anunciado
“icone-saude-azul.svg, imagem”
“Saúde, link”
O enfeite atrapalha.
Certo: Enfeite ignorado
Ícone ignorado
“Saúde, link”
Só a informação útil é lida.
Deixe sem texto alternativo as imagens que só repetem o que o texto vizinho já diz. Se a imagem passar a trazer informação nova, reavalie.
Foto ilustrativa no artigo
Uma foto genérica de pessoas no computador ilustra um artigo.
Errado: Alt para foto genérica
Texto alternativo
“Pessoas sorrindo usando computadores em um escritório claro.”
O leitor gasta tempo com o que não acrescenta.
Certo: Marcada como decorativa
Texto alternativo
(vazio — imagem decorativa)
A pessoa vai direto ao texto.