astro-a11y

name	astro-a11y
description	Accessibility patterns for Astro lead generation sites. WCAG 2.1 AA compliance, screen readers, keyboard navigation, focus management, ARIA. Use for all accessibility implementation.

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

1. Keyboard navigable — All interactive elements reachable via Tab
2. Screen reader friendly — Semantic HTML, proper ARIA
3. Visible focus — Clear focus indicators on all elements
4. Sufficient contrast — 4.5:1 text, 3:1 UI components
5. No motion harm — Respect prefers-reduced-motion
6. Semantic HTML first — Use native elements before ARIA
7. Labels required — Every form input must have a label
8. 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

• Semantic HTML Patterns
• Focus Management — Skip links, focus traps, focus visible styles
• ARIA Patterns — Live regions, mobile menus
• Form Accessibility — Labels, error messages, required fields
• Image Accessibility — Alt text patterns
• Motion & Animation — Reduced motion support
• Screen Reader Only Utility — SR-only CSS class

Testing Checklist

Keyboard

• Tab through entire page — logical order?
• All interactive elements reachable?
• Focus visible on every element?
• Can escape modals with Escape key?
• Skip link works?

Screen Reader

• Page title announced?
• Headings hierarchy correct?
• Images have alt text?
• Form labels announced?
• Errors announced (aria-live)?

Visual

• Contrast passes (4.5:1)?
• Text resizes to 200% without breaking?
• Works without color alone?
• Reduced motion respected?

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

• Skip link present on page
• All forms have proper labels
• Contrast ratios pass WCAG AA
• Keyboard navigation works completely
• axe DevTools shows 0 errors
• Screen reader test passed
• Reduced motion media query implemented
• All images have appropriate alt text