Conteúdo adicional persistente
O que a norma pede
Conteúdo que aparece ao focar ou passar o mouse, como dicas e submenus, fica na tela até a pessoa tirar o foco ou o cursor, dispensá-lo ou até a informação perder a validade.
- 1.4.13 (AA)
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:
Não defina tempo para esconder dicas e submenus: eles ficam na tela enquanto a pessoa precisar. O cursor deve conseguir passar do gatilho para o conteúdo sem que ele desapareça.
Dica do campo de senha
Uma dica explica as regras da senha.
Errado: Dica temporária
Na especificação
Tooltip aparece no hover e some após 2 segundos.
Quem lê devagar não termina de ler as regras.
Certo: Dica que fica
Na especificação
Tooltip permanece enquanto o cursor ou o foco estiverem no campo ou na dica.
Cada pessoa lê no seu ritmo.
Mantenha o conteúdo adicional visível enquanto o cursor estiver sobre o gatilho ou sobre o próprio conteúdo, sem temporizador para escondê-lo. Mostre o mesmo conteúdo quando o gatilho receber foco pelo teclado.
Submenu do menu principal
O menu “Serviços” abre um submenu ao passar o mouse.
Errado: Some ao sair do gatilho
item.addEventListener("mouseleave", () => { submenu.hidden = true; });O submenu fecha antes que o cursor chegue a ele.
Certo: Fica enquanto houver interesse
menu.addEventListener("mouseleave", () => { submenu.hidden = true; // só ao sair do menu inteiro }); item.addEventListener("focusin", abrirSubmenu);O submenu permanece e também abre pelo teclado.
Inclua o comportamento de dicas e submenus no padrão do sistema de design e priorize a revisão dos menus de navegação principais. Relatos de que o menu fecha sozinho indicam esse problema.
Reclamações sobre o menu
O atendimento recebe relatos de que o menu fecha antes de a pessoa escolher.
Errado: Tratado como preferência
Decisão
“É só a pessoa ser mais rápida.”
A barreira continua para quem tem tremor ou usa ampliação.
Certo: Tratado como defeito
Decisão
Correção priorizada: o submenu fica aberto enquanto o cursor estiver sobre ele.
O menu passa a funcionar para todos.
Abra cada dica e submenu, leve o cursor do gatilho até o conteúdo e espere alguns segundos parado. O conteúdo não pode sumir sozinho; repita a verificação pelo teclado.
Tooltip do ícone de ajuda
Teste com o mouse sobre o ícone “?” do formulário.
Errado: Some sozinho
Cursor no “?” → dica aparece
Cursor move para a dica → dica some
Não dá para ler com ampliação.
Certo: Permanece
Cursor no “?” → dica aparece
Cursor move para a dica → dica continua
Cursor sai de ambos → dica some
A dica respeita o tempo da pessoa.
Não coloque informação obrigatória só em dicas, que são mais difíceis de encontrar e de ler. Use a dica para complementos curtos e leve explicações longas para a página.
Regras de senha
As regras aparecem numa dica ao lado do campo.
Errado: Regra só na dica
Na tela
Campo “Senha” com ícone “?”; as regras estão só no tooltip.
Quem não aciona a dica erra a senha.
Certo: Regra à vista
Na tela
Abaixo do campo: “Use 8 caracteres ou mais, com letras e números.”
A regra essencial não depende de hover.