As novidades da versão 2.2: aparência do foco e tamanho do alvo
Aplique os critérios novos da versão mais recente.
As novidades da versão 2.2: aparência do foco e tamanho do alvo é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
What 2.2 Brought
WCAG 2.2 added nine new success criteria in 2023. Two of the most practical for everyday UI are Focus Appearance and Target Size.
Focus Not Obscured
New rule 2.4.11 (Focus Not Obscured) at AA says the focused element must not be fully hidden behind sticky headers or cookie bars.
Why Hidden Focus Hurts
If a sticky banner covers the focused control, keyboard users lose track of where they are. They must see the item they just tabbed to.
Focus Appearance at AAA
Criterion 2.4.13 (Focus Appearance) is AAA. It specifies a minimum indicator area and 3:1 contrast so the focus ring is unmistakable.
Target Size (Minimum)
The AA rule 2.5.8 (Target Size Minimum) asks that tap targets be at least 24 by 24 CSS pixels, or have enough spacing around them.
Why 24 Pixels
Small targets are hard for people with tremors or large fingers. A 24px floor cuts mis-taps without forcing a chunky design everywhere.
The Spacing Exception
A target under 24px can still pass if a 24px circle around its center does not overlap a neighbor. Spacing buys back the size.
Sizing a Target in CSS
Give small buttons a real minimum size so they comfortably clear the 24px floor.
button {
min-width: 24px;
min-height: 24px;
}Inline Links Are Exempt
Links inside a sentence are exempt from 2.5.8, since shrinking text just to enlarge them would harm the reading experience.
Consistent Help: 3.2.6
Another 2.2 add, 3.2.6 (Consistent Help) at A, keeps help links and contact info in the same relative spot across pages.
Redundant Entry: 3.3.7
Criterion 3.3.7 (Redundant Entry) at A says do not make users re-type info they already gave, unless it is essential like a password.
Quick Check
Recall the minimum touch target size from WCAG 2.2.
Recap: The 2.2 Additions
2.2 added focus and target rules: keep focus visible, make targets 24px or well spaced, and stop redundant entry. Next: dragging and authentication. 🎯
Perguntas Frequentes
A aula “As novidades da versão 2.2: aparência do foco e tamanho do alvo” é grátis?
Sim — o texto completo de “As novidades da versão 2.2: aparência do foco e tamanho do alvo” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “As novidades da versão 2.2: aparência do foco e tamanho do alvo”?
Aplique os critérios novos da versão mais recente. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “As novidades da versão 2.2: aparência do foco e tamanho do alvo”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- A, AA, AAA: escolhendo a meta certa
- As novidades da versão 2.2: aparência do foco e tamanho do alvo
- Movimentos de arrastar e autenticação acessível
- Escrevendo uma declaração de conformidade defensável