📱 Mobile Accessibility Training Sample

Switch to a 320px-wide mobile view or test on a phone. Zoom to 200% to test WCAG 1.4.10, 2.5.5, 1.4.4, etc.

✅ Touch Target Size Test

WCAG 2.5.5 requires at least 24×24px (AA), 44×44px (AAA recommended).

❌ Hover-Only Interaction

Only works on hover

✅ Tap-Accessible Toggle

✅ vs ❌ Native vs Custom Inputs

This section shows why native HTML inputs are better for accessibility and mobile usability.

✅ Native Mobile Inputs









Good: Triggers proper mobile keyboards and is automatically accessible.

❌ Custom Inputs (Limited Accessibility)

📅 Pick a date

Type phone number

🌍 Country: [Select]

Issues: Works via JS but:

  • ❌ No native semantic input roles
  • ❌ Lacks proper labels / associations
  • ❌ Doesn’t trigger mobile keyboards correctly
  • ❌ Unpredictable behavior for screen readers

❌ Reflow Failure Demo (Fixed Layout)

Block 1
Block 2

Expected behavior: On mobile or 320px view, this causes horizontal scroll. It does NOT reflow. Fails WCAG 1.4.10.

✅ Responsive Reflow Layout

Block A
Block B

Good: Uses flex-wrap + % widths or breakpoints. Reflows at 320px without scroll. Passes WCAG 1.4.10.

⚠️ Mobile Accessibility Pitfalls

❌ Broken Modal (Not Responsive)

❌ Buttons Too Close / Overlapping