5.1.2.11 - Requisitos para alteração de contexto em elementos interativos
Descrição
Não pode haver alteração de contexto inesperada ao focar em elementos interativos. Nenhum tipo de alteração de contexto ocorre quando algum elemento de interface recebe foco. Assim, há garantia de previsibilidade de navegação na tela sobre componentes que possuem algum tipo de interação. Um componente pode receber foco tanto com algum recurso de tecnologia assistiva (por exemplo, com a utilização de um leitor de tela) como sem recurso de tecnologia assistiva (tocar em um campo de formulário para ativar a digitação).
Exemplo
Em um formulário, ao tocar no último campo, este formulário não é submetido de forma automática, sem avisar o usuário que isso ocorre. Existe um botão “enviar” após o último campo.
Desempenho funcional
Componentes aplicáveis
Cenários para desenvolvimento de interfaces
Escolha um perfil para ver as orientações específicas:
Certifique-se de que ao projetar a interface, o foco em qualquer elemento interativo, como botões ou campos de formulário, não provoque mudanças de contexto inesperadas. Isso garante uma navegação previsível e consistente, essencial para todos os tipos de usuários, especialmente aqueles que utilizam tecnologias assistivas.
Receber foco não é agir
Focar num campo ou botão nunca deve enviar, abrir ou navegar.
Certo: Envio por botão
anotação de especificação
Após o último campo, botão "Enviar". Nada acontece ao focar.
Errado: Envio ao focar
anotação de especificação
Ao tocar no último campo, o formulário é enviado.
No código, evite que o foco em elementos interativos, como campos de formulário ou botões, cause qualquer alteração de contexto (como redirecionamentos ou atualizações automáticas). A interação deve ser clara e controlada pelo usuário, mantendo a previsibilidade de navegação.
Evite ações no evento de foco
Use o foco só para destacar; ações ficam no clique ou envio.
Certo: Foco sem efeito colateral
input.addEventListener("focus", () => { dica.hidden = false; // só mostra ajuda });Mostrar uma dica não muda o contexto.
Errado: Foco dispara ação
ultimoCampo.addEventListener("focus", () => { form.submit(); });O formulário é enviado incompleto.
Aprenda a fazer com conteúdos selecionados para você
Garanta que a aplicação não faça alterações de contexto inesperadas quando um elemento interativo recebe foco, mantendo a previsibilidade da experiência do usuário e assegurando conformidade com as boas práticas de acessibilidade. Isso serve para que os usuários tenham maior controle das suas ações.
Audite eventos de foco
Procure scripts que navegam, enviam ou abrem janelas ao receber foco.
Checklist do requisito 5.1.2.11: eventos de foco
- sem ação no foco
Formulário de cadastro
campos
- sem ação no foco
Menu principal
links
- pendente
Campo de cupom
campo
2 de 3 itens em conformidade, 1 pendente de revisão.
Verificar elementos interativos com foco
Avalie todos os elementos interativos, como campos de formulário, botões, links e controles de navegação, para garantir que receber foco neles não cause uma alteração de contexto automática.
Testar com leitores de tela e navegação por teclado
Use tecnologias assistivas, como leitores de tela, para testar como a aplicação responde quando os elementos interativos recebem foco. Verifique se a navegação permanece previsível.
Testar navegação manual
Realize testes navegando manualmente na aplicação, focando em elementos interativos sem utilizar tecnologias assistivas (por exemplo, clicando em campos de entrada ou usando o teclado para mover entre elementos).
Analisar scripts e eventos associados
Verifique se há eventos de script atrelados aos elementos interativos que possam disparar mudanças de contexto ao receberem foco. Isso inclui alterações automáticas de página, mudanças na interface ou exibição de pop-ups.
Testar diferentes cenários de navegação
Realize testes com diferentes modos de navegação (teclado, mouse, toque em telas sensíveis) para verificar se o comportamento é consistente e previsível em todos os casos.
Validar a experiência do usuário
Verifique com usuários reais, especialmente aqueles que dependem de tecnologias assistivas, se a interação com os elementos interativos é clara e não gera confusão com alterações inesperadas.
Documentar exceções
Se houver casos em que a alteração de contexto ao receber foco for necessária, documente isso e garanta que haja uma notificação clara ao usuário sobre a funcionalidade.
Passe por tudo com Tab
Navegue sem acionar nada e confira se o contexto se mantém.
Certo: Navegação previsível
"E-mail, campo de edição"
"Mensagem, campo de edição"
"Enviar, botão"
Nada acontece até a pessoa agir.
Errado: Navegação com surpresas
"E-mail, campo de edição"
"Mensagem" → formulário enviado
Nova página carregada
A pessoa perde o controle.
Crie um texto explicativo sobre os elementos interativos para ser acessado por tecnologias assistivas quando estiver no modo foco. O modo foco serve para orientar e trazer previsibilidade da ação antes da interação.
Dê dicas que antecipem a ação
A ajuda exibida no foco deve explicar o que vai acontecer ao acionar.
Certo: Dica que orienta
dica no foco
"Ao tocar em Enviar, sua mensagem será enviada ao suporte."
Previsível antes da ação.
Errado: Dica ausente
dica no foco
(nenhuma)
Consequência desconhecida.
Requisitos relacionados
Outros requisitos que se aplicam aos mesmos componentes.