Calculadora de Tempo de Foco em Elemento Acessivel ms

Tempo de foco acessivel por elemento (ms)

Quem navega pela tecla Tab precisa que cada elemento focavel mostre um indicador visivel imediatamente. Na pratica, o atraso de foco acessivel tem que ser quase nada: focus_delay = 0 ms para a mudanca visual. Se voce animar o indicador, segure a transicao em ate 200 ms para ela nao ficar atras da proxima tecla. O criterio WCAG 2.1 2.4.7 Foco Visivel (Nivel AA) deixa isso claro: toda interface operavel por teclado tem que oferecer um modo em que o indicador de foco apareca.

Alguns padroes aparecem o tempo todo. O skip-link ("Pular para o conteudo") 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 voce 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;.

Aplicacoes

Use esta calculadora quando estiver orcando latencia de interacao: formularios, SPAs com listas virtualizadas, modais em que o foco precisa entrar no dialogo em um frame, e widgets customizados como comboboxes ou arvores. Pegue o atraso por elemento, multiplique pelo numero de elementos que o usuario percorre ate 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 transicao 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 mantem a pista e quem usa mouse fica em paz.

Como testar a ordem de foco? Comece no topo da pagina e va apertando Tab, conferindo onde o foco para a cada vez. axe DevTools e Lighthouse tambem acusam estados de foco ausentes ou invisiveis para voce.