5.1.1.6 - Requisito para organização de elementos funcionais e nomes acessíveis
Descrição
Deve ser mantida a mesma organização de elementos funcionais e nomes acessíveis ao longo de toda a aplicação. Os elementos funcionais devem manter-se na mesma posição e com a mesma descrição acessível. Isso facilita a compreensão e acelera o aprendizado do usuário
Exemplo
Blocos de controle e menus mantêm a mesma ordem relativa em todas as telas em que aparecem.
Desempenho funcional
Cenários para desenvolvimento de interfaces
Escolha um perfil para ver as orientações específicas:
Mantenha a disposição dos elementos interativos (botões, menus, ícones) consistente em todas as telas, e use a mesma nomenclatura para descrever as funções.
Mantenha posição e nome iguais entre telas
Componentes repetidos devem aparecer no mesmo lugar e com o mesmo nome.
Certo: Menu consistente
anotação de especificação
Menu inferior com Início, Buscar e Perfil na mesma ordem em todas as telas.
Errado: Menu que muda
anotação de especificação
Na tela de busca, "Perfil" vira o primeiro item e passa a se chamar "Conta".
Garanta que os componentes da interface e suas descrições acessíveis (via aria-label, alt, etc.) permaneçam consistentes em todas as páginas, utilizando bibliotecas de componentes ou layouts reutilizáveis para manter a uniformidade de código e acessibilidade.
Um componente, um nome acessível
Reutilize o mesmo componente para garantir o mesmo nome em todas as telas.
Certo: Componente reutilizado
<!-- Mesmo componente em todas as telas --> <button aria-label="Buscar">…</button>Leitor de tela anuncia: "Buscar, botão" em todas as telas
Errado: Nomes diferentes para a mesma ação
<!-- Tela A --> <button aria-label="Buscar">…</button> <!-- Tela B --> <button aria-label="Lupa">…</button>Leitor de tela anuncia: "Buscar" numa tela e "Lupa" na outra
Aprenda a fazer com conteúdos selecionados para você
Estabeleça diretrizes claras para que todos sigam padrões consistentes de interface e nomenclatura ao longo do desenvolvimento.
Padronize com uma biblioteca de componentes
Mantenha uma lista dos componentes repetidos e confira se estão iguais em todas as telas.
Checklist do requisito 5.1.1.6: componentes repetidos
- mesma ordem
Menu inferior
navegação
- mesmo nome
Botão Buscar
botão
- pendente
Botão Voltar
botão
2 de 3 componentes padronizados, 1 pendente de revisão.
Consistência visual e funcional
Verifique se os elementos interativos, como botões, menus e campos, permanecem na mesma posição e com a mesma funcionalidade em diferentes telas e contextos da aplicação. Isso ajuda a criar previsibilidade para o usuário.
Nomes acessíveis uniformes
Confirme que a descrição acessível (como o aria-label ou alt) desses elementos é consistente em todas as partes da aplicação. Isso assegura que as tecnologias assistivas leiam descrições previsíveis e facilmente reconhecíveis pelos usuários.
Testes de usabilidade com navegação assistiva
Navegue pelas seções da aplicação utilizando tecnologias assistivas para garantir que a consistência visual e textual é mantida, facilitando a familiaridade e reduzindo a curva de aprendizado para o usuário.
Compare as telas com leitor de tela
Percorra o mesmo componente em telas diferentes e compare o que é anunciado.
Certo: Anúncios previsíveis
Tela Início: "Buscar, botão"
Tela Produtos: "Buscar, botão"
Tela Perfil: "Buscar, botão"
A pessoa reconhece o controle em qualquer tela.
Errado: Anúncios que mudam
Tela Início: "Buscar, botão"
Tela Produtos: "Lupa, botão"
Tela Perfil: "Pesquisar, botão"
Parecem três funções diferentes.
Use sempre os mesmos rótulos e descrições, para que os mesmos termos ou expressões sejam usados de forma consistente em toda a aplicação, facilitando a localização de informações pelos usuários. Essa consistência deve ser mantida nos elementos visuais e de interface.
Use sempre o mesmo termo
Escolha um nome para cada função e repita-o em toda a aplicação.
Certo: Termo único
rótulos no aplicativo
"Carrinho" no menu, no botão e nas mensagens
Consistente em todo lugar.
Errado: Sinônimos misturados
rótulos no aplicativo
"Carrinho" · "Sacola" · "Cesta"
Parecem coisas diferentes.
Requisitos relacionados
Outros requisitos que se aplicam aos mesmos componentes.