Elemento em foco parcialmente visível
O que a norma pede
Quando um elemento recebe foco, ao menos parte dele continua visível: nada que a equipe colocou na página, como cabeçalho fixo, banner ou chat, pode escondê-lo por completo.
- 2.4.11 (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:
Reserve espaço no leiaute para cabeçalhos fixos e botões de chat, em vez de colocá-los por cima do conteúdo. Revise no protótipo se o elemento em foco perto do topo ou do rodapé continua à vista.
Cabeçalho fixo e aviso de cookies
A página tem cabeçalho fixo no topo e aviso de cookies fixo embaixo.
Errado: Elementos fixos cobrem o foco
No protótipo
Aviso de cookies fixo de 180px sobre o conteúdo, sem botão para fechar.
Os campos do fim do formulário ficam escondidos ao receber foco.
Certo: Espaço reservado e aviso dispensável
No protótipo
Aviso com “Aceitar” e “Fechar”; conteúdo com margem igual à altura do cabeçalho.
O elemento focado sempre aparece.
Informe ao navegador a altura dos elementos fixos com scroll-padding-top, para que a rolagem pelo teclado não deixe o foco escondido. Garanta que avisos fixos possam ser fechados.
Rolagem com cabeçalho fixo
O cabeçalho do site tem 72px de altura e fica fixo no topo.
Errado: Sem compensar o cabeçalho
header { position: fixed; top: 0; height: 72px; }O campo focado para embaixo do cabeçalho.
Certo: Rolagem que respeita o cabeçalho
html { scroll-padding-top: 88px; }O navegador rola deixando o elemento focado à vista.
Avalie o efeito sobre o foco sempre que uma entrega acrescentar um elemento fixo, como chat ou aviso de cookies. Exija que esses elementos, inclusive os de terceiros, possam ser fechados.
Novo botão de chat
O time comercial pede um botão de atendimento fixo no canto da tela.
Errado: Entra sem avaliação
Decisão
Widget instalado em todas as páginas, sobre o botão “Enviar” dos formulários.
Quem usa teclado não vê o botão principal ao chegar nele.
Certo: Entra com critério
Decisão
Widget liberado depois de testar que não cobre elementos focados em nenhuma página.
O novo recurso não cria barreira.
Navegue com Tab por páginas longas, também com zoom de 200% e em tela estreita, e observe os elementos que recebem foco perto do topo e do rodapé. Se algum sumir atrás de um elemento fixo, registre qual elemento o cobriu.
Formulário longo
Teste com Tab até o fim do formulário de cadastro.
Errado: Foco escondido
Tab → campo “CEP” visível
Tab → campo “Número” atrás do aviso de cookies
Tab → botão “Enviar” atrás do aviso
Dois elementos focados ficam totalmente cobertos.
Certo: Foco sempre à vista
Tab → campo “CEP” visível
Tab → campo “Número” visível
Tab → botão “Enviar” visível
A página rola e mostra cada elemento.
Mantenha curtos os avisos fixos, como o de cookies, e leve os detalhes para uma página própria. Quanto menor o aviso, menos ele cobre a página.
Aviso de cookies
O aviso aparece fixo no rodapé de todas as páginas.
Errado: Aviso extenso
Texto do aviso
Três parágrafos sobre a política de cookies, sem botão de fechar.
Ocupa metade da tela do celular e cobre o conteúdo.
Certo: Aviso curto
Texto do aviso
“Usamos cookies para lembrar suas preferências. Saiba mais.” [Aceitar] [Fechar]
Informa em uma linha e sai do caminho.