Touch Target & Responsive Test
WCAG 2.5.5 Verification
This page tests that all interactive elements meet the minimum touch target size of 44x44px on mobile devices (viewports ≤ 767px).
Instructions:
- Resize browser to 375px width to simulate iPhone SE
- Red dashed borders show touch target zones
- Press Tab to test the skip link
- Check viewport indicator at bottom-right
1. Skip Link Test
Press the Tab key to focus the skip link. It should appear at the top-left corner with minimum 44x44px touch target.
✓ Expected: Hidden until focused, then visible with 44x44px minimum
2. Navigation Links (genesis-synapse('navigate'))
✓ Expected: 44x44px minimum on mobile (≤767px), 36px on desktop
3. Social Links (genesis-synapse('social'))
✓ Expected: 44x44px on mobile, 40x40px on tablet, 36x36px on desktop
4. Execute Buttons (genesis-synapse('execute'))
✓ Expected: 44x44px minimum on mobile, 42x42px on tablet
5. Typography Sizes
Axiom (Headline)
The Future of Artificial Superintelligence
✓ Mobile: 32px minimum (2rem), Desktop: 56px (3.5rem)
Discourse (Body)
This is standard body text that should be comfortable to read on all devices. The minimum size is 16px on mobile to prevent iOS zoom.
✓ Mobile: 16px minimum (1rem), Desktop: 18px (1.125rem)
Gloss (Small Text)
Small annotation or citation text for additional context. Improved from 12px to 14px minimum on mobile.
✓ Mobile: 14px minimum (0.875rem) - WCAG recommended
Quantum (Tags)
TAG
LABEL
✓ Mobile: 12px (acceptable for non-primary content like tags)
✓ Test Summary
- ✅ Skip link: Proper focus visibility + 44x44px touch target
- ✅ Navigation links: 44x44px minimum on mobile with expand zone
- ✅ Social links: 44x44px mobile, 40x40px tablet, 36x36px desktop
- ✅ Execute buttons: 44x44px minimum on mobile
- ✅ Typography: All sizes meet WCAG recommendations
All WCAG 2.5.5 touch target requirements met!