Calculadora de Tamanho de Borda de Foco Visivel em px
Recomenda a espessura minima em pixels da borda do foco visivel conforme WCAG 2.4.13 Focus Appearance.
—
Tamanho da borda de foco visível (px)
A WCAG 2.2 trouxe dois critérios que aqui andam juntos: 2.4.11 Foco Não Obscurecido (Mínimo) — Nível AA e 2.4.13 Aparencia do Foco. Entre os dois, o indicador de foco tem de ser grande e contrastado o suficiente para ninguém deixar passar. O mais fino que ele pode ter e 2 CSS px de espessura no perimetro, e o contraste entre o estado focado e o não focado precisa chegar a 3:1 contra o que estiver atrás. Resumindo: borda ≥ 2 px && contraste ≥ 3:1.
No Tailwind CSS a receita de praxe e focus:ring-2 focus:ring-blue-500 focus:ring-offset-2, que da um anel de 2 px com deslocamento. Escrevendo CSS puro, va de :focus-visible em vez de :focus, porque ele so dispara na navegacao por teclado e te poupa daquele contorno chato toda vez que alguem clica. Os navegadores até trazem um anel padrão (o legado -webkit-focus-ring-color), mas ele fica tão diferente entre Chrome, Firefox e Safari que vale mesmo a pena definir o seu. A recomendação 3.6 do eMAG (Modelo de Acessibilidade em Governo Eletronico) brasileiro diz a mesma coisa.
Aplicações
Recorra a esta calculadora ao desenhar botoes, links, controles de formulário, checkboxes customizados, controles segmentados, abas e, na verdade, qualquer widget interativo. Cheque o indicador em fundo claro e escuro, porque um anel azul que parece bom num lugar pode reprovar no 3:1 sobre um hero azul-marinho. Em UIs densas como toolbars e grids, 2 px lisos podem soar poluidos, então tente 3 px com opacidade menor para manter o contraste sem pesar no visual.
FAQ
box-shadow conta como borda de foco? Conta sim. Uma sombra interna ou externa com contraste e espessura suficientes atende a 2.4.11, e muita gente prefere justamente porque ela não mexe no layout.
Qual a diferença entre :focus e :focus-visible? O :focus entra em qualquer foco, clique de mouse incluso. Ja o :focus-visible so combina quando o navegador conclui que o usuário de fato precisa enxergar o indicador, o que costuma ser teclado ou tecnologia assistiva.
Posso usar so cor para indicar foco? Não. A WCAG 1.4.1 Uso de Cor deixa claro que so mudar o contraste não resolve. Precisa também de uma mudança estrutural, uma borda, anel ou outline de pelo menos 2 px.
Ferramentas Relacionadas
Calculadora de Tamanho de Area de Servico de Cozinha
Estima area minima de area de servico residencial conforme equipamentos.
Calculadora de Tamanho de Texto Recomendado WCAG AA
Recomenda tamanho minimo de texto em pixels para WCAG AA conforme distancia tipica de leitura.
Area minima do canil por tamanho do cao
Calcula area minima recomendada para canil conforme porte do cao e numero de animais.
Calculadora de Tamanho de Vaso para Orquidea Cattleya
Sugere o tamanho ideal de vaso para orquidea Cattleya.
Calculadora de Tecido para Lencol de Cama por Tamanho em cm
Estima centimetros de tecido para um lencol de cama a partir das dimensoes do colchao com sobra padrao.
Tamanho do cinto a partir da cintura cm
Sugere tamanho de cinto (S/M/L/XL ou numero) a partir da cintura em centimetros.
Os resultados desta ferramenta têm caráter apenas informativo e educativo e não constituem aconselhamento profissional, financeiro, médico, jurídico, tributário ou contábil. Confirme decisões importantes com um profissional qualificado e fontes oficiais.