Home
Bookmarks
Leagues
LEARN
Courses
Career Paths
Assessments
Tutorials
Arcade
Glossary
GROW
Certifications
Log in
Glossary
Log inSign up
Courses/Accessible Interface Foundations/Keyboard paths and visible focus/
Exercise #9

Target Size & Spacing (WCAG 2.5.5 / 2.5.8)

Accessibility is not limited to desktop keyboards; it directly impacts touch screens and motor control.

Users with hand tremors, arthritis, parkinson's, or situational constraints (walking, riding a bumpy bus) struggle with microscopic buttons.

The Strict Target Size Standards:

  • WCAG 2.2 Level AA (Criterion 2.5.8 - Target Size Minimum): Interactive targets must be at least 24 x 24 CSS pixels, or provide sufficient spacing so the target plus margin reaches 24px.
  • WCAG Level AAA / Apple HIG / Google Material (2.5.5): Targets should be at least 44 x 44 CSS pixels (Apple) or 48 x 48dp (Google).

CSS Technique: An icon can visually appear as a 16px glyph, but by adding padding or pseudo-elements (::after), its clickable touch target expands to 48px.

Topics

Sequential Focus Navigation & DOM Order
The Crime of 'outline: none'
The Three Tabindex Rules: 0, -1, and Never > 0
Skip Links: Bypassing Blocks (WCAG 2.4.1)
Modal Dialogues: The Sacred Focus Trap
Escape Key Dismissal: WCAG 1.4.13 & 2.1.2
Composite Widgets: Arrow Keys vs Tab Key
Single-Page App (SPA) Route Transitions
Target Size & Spacing (WCAG 2.5.5 / 2.5.8)
Master Challenge: Auditing a Broken Modal Dialogue

From lesson

2

Keyboard paths and visible focus

Level 1 · Accessible interaction basics

Top contributors

Community contribution details will appear here once real learner activity is available.

Share