Calculadora de Tempo de Foco em Elemento Acessivel ms

Tempo de foco acessível por elemento (ms)

Quem navega pela tecla Tab precisa que cada elemento focavel mostre um indicador visível imediatamente. Na pratica, o atraso de foco acessível tem que ser quase nada: focus_delay = 0 ms para a mudança visual. Se você animar o indicador, segure a transição em até 200 ms para ela não ficar atrás da próxima tecla. O critério WCAG 2.1 2.4.7 Foco Visível (Nível AA) deixa isso claro: toda interface operavel por teclado tem que oferecer um modo em que o indicador de foco apareca.

Alguns padrões aparecem o tempo todo. O skip-link ("Pular para o conteúdo") deve surgir logo no primeiro Tab. A ordem de tabulacao precisa acompanhar a leitura visual. E o atributo aria-current="page" marca o item ativo na navegacao. O que você nunca deve fazer e escrever outline: none sem repor o indicador, uma das falhas WCAG mais frequentes nas auditorias. Um bom ponto de partida e outline: 2px solid currentColor; outline-offset: 2px;.

Aplicações

Use esta calculadora quando estiver orcando latencia de interacao: formulários, SPAs com listas virtualizadas, modais em que o foco precisa entrar no diálogo em um frame, e widgets customizados como comboboxes ou árvores. Pegue o atraso por elemento, multiplique pelo número de elementos que o usuário percorre até o alvo e veja o total. Se passar de algumas centenas de milissegundos, refaca a ordem ou coloque um skip-link.

FAQ

Posso animar o anel de foco? Pode, desde que a transição fique abaixo de 200 ms e o elemento permaneca no lugar. Anime so cor, opacidade ou box-shadow.

E :focus-visible versus :focus? Va de :focus-visible para o anel aparecer no foco por teclado e sumir nos cliques de mouse. Quem usa teclado mantém a pista e quem usa mouse fica em paz.

Como testar a ordem de foco? Comece no topo da página e va apertando Tab, conferindo onde o foco para a cada vez. axe DevTools e Lighthouse também acusam estados de foco ausentes ou invisiveis para você.