astro-a11y

Soborbo's avatarfrom Soborbo

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

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 1, 2026
[Testing and QA]

When & Why to Use This Skill

This Claude skill provides a comprehensive framework for implementing and auditing web accessibility (A11y) specifically for Astro-based lead generation sites. It ensures full WCAG 2.1 AA compliance by providing standardized patterns for keyboard navigation, screen reader support, focus management, and semantic HTML. By integrating these best practices, developers can meet legal requirements like the UK Equality Act 2010 while significantly improving the user experience for all visitors.

Use Cases

  • Case 1: Implementing keyboard-navigable interactive elements such as accessible modals, skip links, and navigation menus within an Astro project.
  • Case 2: Conducting comprehensive accessibility audits using the provided checklist to ensure 0 errors in tools like axe DevTools and WAVE.
  • Case 3: Optimizing lead generation forms with proper labeling, error announcements (aria-live), and focus management to increase conversion rates among users with disabilities.
  • Case 4: Ensuring visual and motion accessibility by enforcing 4.5:1 contrast ratios and respecting 'prefers-reduced-motion' media queries.
nameastro-a11y
descriptionAccessibility 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
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

  • 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