5.1.1.21 - Requisitos para saída ou retorno perceptível a todos os usuários
Descrição
A aplicação deve fornecer uma forma de saída ou retorno perceptível a todos os usuários. O usuário deve ter formas de retornar ou voltar para as telas anteriores de forma intuitiva.
Exemplo
Uma página permite o uso do botão “voltar” do dispositivo ou disponibiliza um botão para voltar para a tela anterior.
Desempenho funcional
Componentes aplicáveis
Cenários para desenvolvimento de interfaces
Escolha um perfil para ver as orientações específicas:
Crie elementos de navegação que sejam familiares e que permitam ao usuário navegar livremente pela aplicação, fornecendo uma forma de saída e que tenham um feedback claro. Esses elementos podem ser botões de "voltar" ou links para a página anterior, posicionando-os em locais previsíveis e de fácil acesso. Além disso, garanta que esses elementos sejam claramente visíveis e fáceis de identificar em toda a interface.
Sempre ofereça um caminho de volta
Coloque o retorno em local previsível e com rótulo visível.
Certo: Voltar visível
anotação de especificação
Botão "Voltar para pedidos" no topo esquerdo de todas as telas internas.
Errado: Sem saída
anotação de especificação
Tela de detalhes sem botão de voltar; só o gesto do sistema.
Implemente funcionalidades de navegação que permitam ao usuário retornar facilmente às telas anteriores, como botões de "voltar" e atalhos acessíveis. Use atributos como aria-label para garantir que esses elementos sejam identificados corretamente por tecnologias assistivas.
O que o leitor de tela anuncia
O retorno deve ser um elemento real, com nome que diga o destino.
Certo: Voltar com destino
<a href="/pedidos"> <svg aria-hidden="true">…</svg> Voltar para pedidos </a>Leitor de tela anuncia: "Voltar para pedidos, link"
Errado: Seta sem nome
<div onclick="history.back()"> <svg>…</svg> </div>Leitor de tela anuncia: nada: não é focável nem tem nome
Aprenda a fazer com conteúdos selecionados para você
Assegure-se de que a equipe adote práticas de design e desenvolvimento que incluam formas intuitivas e acessíveis de navegação, permitindo que todos os usuários retornem facilmente a telas anteriores, melhorando a experiência de uso.
Confira a saída de cada tela
Liste as telas e confira se todas têm retorno visível e acessível.
Checklist do requisito 5.1.1.21: telas internas
- botão voltar
Detalhe do pedido
tela
- botão voltar
Configurações
tela
- pendente
Janela de cupom
modal
2 de 3 telas em conformidade, 1 pendente de revisão.
Verificar botões de navegação
Certifique-se de que a aplicação possui botões ou links claramente visíveis para voltar ou sair de uma tela. Eles devem estar posicionados de forma consistente e acessível em todas as páginas.
Conferir texto descritivo
As funções de retorno devem ser acompanhadas por rótulos claros e intuitivos, como "Voltar" ou "Página Anterior", para garantir que todos compreendam a funcionalidade.
Compatibilidade com tecnologias assistivas
Teste se leitores de tela reconhecem e anunciam corretamente os elementos de saída ou retorno, garantindo que usuários com deficiência visual saibam como voltar a telas anteriores.
Implementar feedback visual e auditivo
Sempre que um usuário acionar um botão de retorno, a aplicação deve fornecer um feedback perceptível, como uma breve mudança visual ou um som que confirme a ação.
Consistência na navegação
Verifique se todas as telas seguem a mesma estrutura de navegação, o que facilita a previsibilidade e o aprendizado para o usuário.
Testar interações
Simule o uso por pessoas com diferentes necessidades para garantir que a navegação de retorno seja facilmente localizada e operada.
Tente sair de cada tela
Com leitor de tela e com toque, encontre e use o caminho de volta.
Certo: Saída encontrada
"Voltar para pedidos, link"
Toque duplo → volta à lista de pedidos
Retorno fácil de achar e de usar.
Errado: Pessoa presa
"Detalhes do pedido"
seta de voltar não anunciada
A pessoa não encontra a saída.
Redija rótulos específicos para os botões ou links de retorno, como "Voltar à página anterior" ou "Retornar ao menu", para garantir que os usuários saibam exatamente para onde irão ao clicar, garantindo que há usuário tem opções para navegação sem barreiras.
Diga para onde o retorno leva
Rótulos de retorno ficam melhores com o destino.
Certo: Destino explícito
rótulo do retorno
"Voltar para pedidos"
A pessoa sabe aonde vai.
Errado: Destino implícito
rótulo do retorno
"<" · "Voltar"
Voltar para onde?
Requisitos relacionados
Outros requisitos que se aplicam aos mesmos componentes.