Astro Accessibility Skill
Purpose
Ensures WCAG 2.1 AA compliance for lead generation websites. Legal requirement under UK Equality Act 2010. Provides essential patterns for keyboard navigation, screen readers, focus management, and ARIA implementation.
Core Rules
- Keyboard navigable — All interactive elements reachable via Tab
- Screen reader friendly — Semantic HTML, proper ARIA
- Visible focus — Clear focus indicators on all elements
- Sufficient contrast — 4.5:1 text, 3:1 UI components
- No motion harm — Respect
prefers-reduced-motion
- Semantic HTML first — Use native elements before ARIA
- Labels required — Every form input must have a label
- Alternative text — All images need appropriate alt text
Buttons vs Links
| Element | Use For |
|---|
<button> | Actions (submit, toggle, open modal) |
<a href> | Navigation (go to page, section) |
Color Contrast Requirements
| Element | Minimum Ratio |
|---|
| Body text | 4.5:1 |
| Large text (18px+ or 14px bold) | 3:1 |
| UI components | 3:1 |
| Disabled elements | No requirement |
Testing Tools
- Chrome DevTools → Rendering → Emulate vision deficiencies
- axe DevTools extension
- WAVE extension
- Screen readers: NVDA (Windows), VoiceOver (Mac), JAWS
References
Testing Checklist
Keyboard
Screen Reader
Visual
Forbidden
- ❌
<div> or <span> for interactive elements
- ❌
outline: none without replacement focus style
- ❌
tabindex greater than 0
- ❌ Missing form labels
- ❌ Color as only indicator
- ❌ Auto-playing video/audio
- ❌ CAPTCHA without alternative
Definition of Done