The 2.2 Additions: Focus Appearance & Target Size
Apply the criteria new to the latest version.
The 2.2 Additions: Focus Appearance & Target Size is a free Web Accessibility Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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. 🎯
Frequently asked questions
Is the “The 2.2 Additions: Focus Appearance & Target Size” lesson free?
Yes — the full text of “The 2.2 Additions: Focus Appearance & Target Size” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “The 2.2 Additions: Focus Appearance & Target Size”?
Apply the criteria new to the latest version. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “The 2.2 Additions: Focus Appearance & Target Size” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- A, AA, AAA: Picking the Right Target
- The 2.2 Additions: Focus Appearance & Target Size
- Dragging Movements and Accessible Authentication
- Writing a Defensible Conformance Statement