Conteúdo adicional dispensável
O que a norma pede
Conteúdo que aparece ao focar ou passar o mouse pode ser dispensado, por exemplo com a tecla Esc, sem mover o foco nem o cursor. Não é preciso quando o conteúdo informa um erro ou não cobre nada da página.
Formas de atender
Basta uma delas. A primeira é a preferida; as demais são alternativas para exceções.
- Uma forma de atender: o conteúdo adicional pode ser fechado sem tirar o foco ou o cursor do lugar.
- Outra forma: o conteúdo é uma mensagem de erro de preenchimento, ou não esconde nem substitui outro conteúdo.
- 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:
Posicione dicas e submenus para não cobrir o que a pessoa está lendo e preveja o fechamento pela tecla Esc. Se o texto for longo, use outro componente em vez de uma dica grande.
Dica sobre o campo de CPF
A dica aparece por cima do campo seguinte.
Errado: Cobre e não fecha
Na especificação
Tooltip sobre o campo “Data de nascimento”, sem forma de fechar.
A pessoa precisa mover o cursor para ver o campo.
Certo: Não cobre ou fecha com Esc
Na especificação
Tooltip à direita do campo; Esc fecha sem mover o foco.
O conteúdo da página continua acessível.
Feche dicas e submenus com Esc mantendo o foco no gatilho, e não os reabra enquanto o foco continuar ali. Teste com ampliação de tela, em que o conteúdo cobre mais área.
Tooltip customizado
Um tooltip aparece no foco do botão de ajuda.
Errado: Só fecha tirando o foco
botao.addEventListener("blur", fecharTooltip);Para fechar, a pessoa perde o lugar em que estava.
Certo: Esc fecha sem mover o foco
botao.addEventListener("keydown", (e) => { if (e.key === "Escape") fecharTooltip(); });O conteúdo sai do caminho e o foco fica onde está.
Inclua o fechamento por Esc no padrão de dicas e submenus do sistema de design e verifique esse ponto antes de adotar bibliotecas de componentes. Assim a regra vale para o produto inteiro.
Adoção de biblioteca de componentes
A equipe avalia uma nova biblioteca de interface.
Errado: Avaliada só pela aparência
Decisão
Biblioteca adotada sem verificar tooltips e menus pelo teclado.
Todas as dicas do produto passam a não fechar.
Certo: Avaliada pelo comportamento
Decisão
Critério de escolha: tooltips e menus fecham com Esc sem mover o foco.
O problema é evitado de uma vez.
Com o conteúdo adicional aberto por hover ou por foco, aperte Esc sem mover o mouse nem o foco. Se ele não fechar e estiver cobrindo texto ou campos, registre o defeito, inclusive com zoom de 200%.
Prévia de notícia no hover
Passar o mouse sobre uma manchete mostra uma prévia.
Errado: Não dá para dispensar
Cursor na manchete → prévia cobre a notícia seguinte
Esc → nada acontece
A prévia só sai movendo o cursor.
Certo: Esc dispensa
Cursor na manchete → prévia aparece
Esc → prévia fecha, cursor no mesmo lugar
A pessoa volta a ver a página.
Mantenha dicas e prévias curtas e sem repetir o que já está na página. Quando houver instrução de uso, diga que a tecla Esc fecha a dica.
Prévia do documento
Uma prévia mostra o resumo de um edital ao passar o mouse.
Errado: Prévia longa
Texto da prévia
Os três primeiros parágrafos do edital.
A prévia ocupa a tela e esconde a lista.
Certo: Prévia objetiva
Texto da prévia
“Edital de 2025 para bolsas de pesquisa. Inscrições até 30/05.”
Informa o essencial e cobre pouco.