Mudança de contexto previsível no foco
O que a norma pede
Nenhum componente muda o contexto (abre página, envia formulário, move o foco) só por receber foco do teclado ou o cursor do mouse.
- 3.2.1 (A)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Especifique que páginas e modais só abrem depois de uma escolha explícita, nunca por receber foco ou pela passagem do mouse. Revise menus que navegam ao passar o cursor.
Menu de seções
Cada item leva à sua seção.
Errado: Navega no foco
Na especificação
“Ao focar o item, carregar a seção.”
Quem usa Tab é levado a outra página sem querer.
Certo: Navega ao acionar
Na especificação
“Ao acionar o item (clique, toque ou Enter), carregar a seção.”
A pessoa decide quando ir.
Não navegue nem mova o foco nos eventos focus e mouseover. Mostrar uma dica no foco é permitido; para ações, use click, que também é acionado pelo teclado.
Abas de conteúdo
Abas que carregam conteúdo de outra página.
Errado: Navega no foco
aba.addEventListener("focus", () => { location.href = aba.dataset.url; });Passar com Tab troca de página.
Certo: Navega no clique
aba.addEventListener("click", () => { location.href = aba.dataset.url; });Só troca ao acionar.
Inclua nos critérios de aceite que nada mude de contexto só com o foco, a começar por menus e abas. Mudanças inesperadas desorientam quem usa leitor de tela, que pode nem perceber que mudou de lugar.
Relatos de “o site muda sozinho”
O atendimento recebe relatos de páginas que mudam ao navegar.
Errado: Sem investigação
Decisão
Relato arquivado como “erro da pessoa”.
A barreira continua.
Certo: Investigado
Decisão
Encontrado menu que navega no foco; correção priorizada.
A navegação fica previsível.
Percorra a página só com Tab e Shift+Tab, sem acionar nada, e passe o mouse sobre os menus. Se a página mudar ou o foco saltar sem que você acione nada, registre o elemento que causou isso.
Navegação pelas abas
Teste só com Tab.
Errado: Mudança inesperada
Tab → aba “Documentos”
Página recarrega em “Documentos” sem acionar
O foco mudou o contexto.
Certo: Nada muda sozinho
Tab → aba “Documentos”
Tab → aba “Prazos”
Enter → mostra “Prazos”
A pessoa escolhe quando mudar.
Deixe claro no texto quando um elemento leva a outro lugar e não peça para “passar o mouse para ver” algo que muda a página.
Instrução do menu
Texto de ajuda do menu de seções.
Errado: Ação no hover
Na tela
“Passe o mouse sobre uma seção para abri-la.”
Incentiva um comportamento que muda o contexto.
Certo: Ação explícita
Na tela
“Escolha uma seção para abri-la.”
A pessoa decide.