5.1.1.1 - Requisito para elementos não textuais
Descrição
Elementos não textuais devem ter um texto alternativo que descreva o seu significado. Elementos não textuais, como imagens, cujo significado é essencial para a compreensão do que é exibido na tela, devem ter uma alternativa textual a ser interpretada por recursos de tecnologia assistiva. Elementos meramente decorativos devem ser ignorados por recursos de tecnologia assistiva.
Exemplo
Foto de um resgate em uma notícia descreve a cena exibida na imagem.
Desempenho funcional
Cenários para desenvolvimento de interfaces
Escolha um perfil para ver as orientações específicas:
Identifique elementos visuais essenciais e decorativos, assegurando que aqueles que carregam significado tenham um texto alternativo descritivo.
Anote o papel de cada imagem no protótipo
Marque se cada elemento é informativo ou decorativo e deixe o texto alternativo especificado. Quem desenvolve não deve precisar adivinhar.
Certo: Imagem informativa anotada
informativoanotação de especificação
alt: "Bombeiros resgatam criança de carro submerso durante enchente"
Errado: Imagem sem anotação
indefinidoanotação de especificação
Nenhuma anotação: o desenvolvedor decide sozinho o que escrever.
Certo: Elemento decorativo
decorativoanotação de especificação
Ignorar por tecnologia assistiva.
Errado: Alt genérico
informativoanotação de especificação
alt: "imagem" / "foto.jpg": não descreve o significado.
Insira atributos de texto alternativo (alt) em elementos não textuais relevantes, como imagens e ícones essenciais. Para elementos decorativos, configure o código para que tecnologias assistivas os ignorem.
O que o leitor de tela anuncia
Compare o código e o que a pessoa usuária de leitor de tela ouve em cada caso.
Certo: Imagem essencial com alt descritivo
<img src="resgate.jpg" alt="Bombeiros resgatam criança de carro submerso">Leitor de tela anuncia: "imagem, bombeiros resgatam criança de carro submerso"
Errado: Imagem essencial sem alt
<img src="resgate.jpg">Leitor de tela anuncia: "imagem, resgate.jpg": sem significado
Certo: Ícone decorativo oculto
<img src="estrela.svg" alt="" aria-hidden="true"> <span>Favoritado</span>Leitor de tela anuncia: apenas "Favoritado"
Errado: Ícone decorativo com alt
<img src="estrela.svg" alt="estrela"> <span>Favoritado</span>Leitor de tela anuncia: "estrela, Favoritado": redundante
Aprenda a fazer com conteúdos selecionados para você
Certifique-se de que a equipe inclua descrições textuais nos elementos visuais relevantes e configure a exclusão de itens decorativos para tecnologias assistivas.
Acompanhe a conformidade por tela
Liste os elementos não textuais de cada tela e o estado de cada um. Assim fica claro o que ainda falta revisar.
Checklist do requisito 5.1.1.1: tela "Notícias"
- alt descritivo
Foto da matéria
elemento essencial
- oculto para leitor de tela
Ícone de destaque
elemento decorativo
- pendente
Gráfico de audiência
elemento essencial
2 de 3 elementos em conformidade, 1 pendente de revisão.
Essencialidade e precisão dos textos alternativos
Certifique-se de que cada elemento não textual relevante (como imagens ou ícones com propósito informativo) possua uma descrição textual clara e precisa, que transmita o significado necessário para a compreensão da interface. Verifique se esses textos refletem o conteúdo e a função dos elementos de forma objetiva.
Ignorar elementos decorativos
Valide se os elementos decorativos estão corretamente configurados para serem ignorados por tecnologias assistivas, o que pode ser feito com o uso do atributo aria-hidden="true" ou um alt="" vazio, dependendo da tecnologia usada. Isso garante que os leitores de tela, por exemplo, não leiam informações desnecessárias, proporcionando uma experiência de navegação mais limpa.
Funcionalidade com tecnologias assistivas
Teste a navegação com leitores de tela e outras tecnologias assistivas para verificar se os textos alternativos são lidos em ordem lógica e se eles efetivamente cumprem seu papel sem causar confusão ao usuário. Certifique-se de que cada elemento essencial seja acessível e compreensível na sequência natural de navegação.
Simule a navegação real
Teste com leitores de tela se os textos alternativos são lidos em ordem lógica e se os elementos decorativos são ignorados, sem causar confusão ou ruído.
Certo: Navegação limpa
"botão, favoritar"
ícone decorativo ignorado
"imagem, gráfico de vendas subindo 20%"
Sequência curta: só o que importa é lido.
Errado: Navegação poluída
"imagem, linha-decorativa-azul.svg"
"botão, imagem, estrela"
"imagem, foto.jpg"
Ruído decorativo e alt sem significado real.
Produza textos alternativos claros e resumidos para elementos visuais importantes, descrevendo seu propósito e contexto. Imagens meramente decorativas devem ser ignoradas pelas tecnologias assistivas.
Escreva textos alternativos objetivos
Descreva o que a imagem comunica naquele contexto, em uma frase curta.
Certo: Texto alternativo bom
campo: texto alternativo
"Bombeiros resgatam criança de carro submerso durante enchente"
Objetivo: descreve a cena e o contexto.
Errado: Texto alternativo ruim
campo: texto alternativo
"imagem" · "foto1.jpg" · "clique aqui para ver a imagem da notícia sobre o resgate ocorrido..."
Genérico, ou longo e redundante demais.
Requisitos relacionados
Outros requisitos que se aplicam aos mesmos componentes.