5.1.1.8 - Requisitos para descrição de elementos de interface interativos
Descrição
Elementos de interface interativos devem descrever sua funcionalidade de forma clara, para a compreensão mesmo fora do contexto. Elementos como botões, links e ícones devem ser compreendidos mesmo fora do contexto. Esses elementos devem ter atributos ou alternativas textuais que descrevem sua funcionalidade aos usuários de tecnologia assistiva. Em caso de elementos que se repetem na interface, cada um deles deve fazer referência a qual objeto ou contexto a ação ou funcionalidade está relacionada.
Exemplo
Um ícone de uma “casa” que leva o usuário para a página inicial precisa de um texto alternativo “voltar para o início”. Uma imagem “+” precisa ter o texto alternativo “Botão Adicionar Despesa” (em uma tela de cadastro de despesas).
Desempenho funcional
Componentes aplicáveis
Cenários para desenvolvimento de interfaces
Escolha um perfil para ver as orientações específicas:
Crie botões, ícones e links com rótulos textuais claros e específicos, de modo que o usuário possa entender a função do elemento mesmo sem contexto adicional. Evite o uso de ícones sem texto explicativo, especialmente em ações críticas.
Deixe a função clara mesmo fora de contexto
Botões e links repetidos devem dizer a qual item se referem.
Certo: Ícone com função explícita
anotação de especificação
Ícone "+" na tela de despesas: nome "Adicionar despesa".
Errado: Ícone ambíguo
anotação de especificação
Ícone "+" sem texto nem nome definido.
Utilize atributos como aria-label, aria-describedby, ou alt para fornecer descrições claras de botões e links, garantindo que a funcionalidade de cada elemento seja entendida por usuários de tecnologia assistiva mesmo fora do seu contexto visual.
O que o leitor de tela anuncia
Em listas de links ou botões, cada nome precisa fazer sentido sozinho.
Certo: Link com destino claro
<a href="/relatorio.pdf"> Baixar relatório de vendas </a>Leitor de tela anuncia: "Baixar relatório de vendas, link"
Errado: Link genérico
<a href="/relatorio.pdf">Clique aqui</a>Leitor de tela anuncia: "Clique aqui, link": aonde leva?
Certo: Botões repetidos distintos
<button aria-label="Excluir foto de perfil"> Excluir </button>Leitor de tela anuncia: "Excluir foto de perfil, botão"
Errado: Botões repetidos iguais
<button>Excluir</button> <button>Excluir</button>Leitor de tela anuncia: "Excluir, botão" duas vezes: excluir o quê?
Aprenda a fazer com conteúdos selecionados para você
Estabeleça e revise práticas de nomenclatura e descrição claras e consistentes para todos os elementos interativos, garantindo que as equipes criem interfaces rm que a função de cada elemento seja compreendida por todos os tipos de usuários, inclusive fora de contexto.
Mapeie ações repetidas
Identifique botões e links que se repetem e confira se cada um indica seu objeto.
Checklist do requisito 5.1.1.8: tela "Despesas"
- função explícita
Adicionar despesa (+)
botão de ícone
- cita o item
Excluir (por item)
botão repetido
- pendente
Ver mais
link repetido
2 de 3 elementos em conformidade, 1 pendente de revisão.
Descrição completa e independente
Certifique-se de que cada elemento interativo, como botões, links e ícones, possui uma descrição acessível que indique sua função de forma completa, permitindo ao usuário entender sua ação sem precisar de contexto adicional. Por exemplo, um botão que redireciona para um formulário de contato deve ser rotulado como "Abrir formulário de contato" em vez de apenas "Abrir".
Distinção de elementos repetidos
Teste se elementos repetidos têm descrições específicas que indiquem o contexto ou a função diferenciada de cada um. Isso é importante para evitar que o usuário fique confuso sobre qual ação cada elemento executa. Por exemplo, botões "Excluir" devem indicar o objeto a que estão associados, como "Excluir foto de perfil".
Validação com leitores de tela
Utilize tecnologias assistivas para verificar se cada elemento é lido corretamente e de forma clara, possibilitando que os usuários identifiquem a função sem ambiguidade.
Liste os links e botões fora de contexto
Use a lista de links do leitor de tela: cada item deve fazer sentido sozinho.
Certo: Lista compreensível
"Baixar relatório de vendas"
"Abrir formulário de contato"
"Excluir despesa de março"
Cada item diz a ação e o objeto.
Errado: Lista ambígua
"Clique aqui"
"Saiba mais"
"Saiba mais"
Fora do contexto, nada se entende.
Ao escrever textos para botões ou links, descreva claramente a ação ou o objeto a que se refere, evitando termos genéricos como "Clique aqui". Use descrições específicas como "Enviar formulário de contato" ou "Baixar relatório de vendas".
Escreva links que digam o destino
Evite termos genéricos e diga a ação e o objeto.
Certo: Link específico
texto do link
"Baixar relatório de vendas (PDF)"
Diz a ação, o objeto e o formato.
Errado: Link genérico
texto do link
"Clique aqui" · "Saiba mais" · "Veja"
Não faz sentido sozinho.
Requisitos relacionados
Outros requisitos que se aplicam aos mesmos componentes.