Agent skill

astro-a11y

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

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/astro-a11y

SKILL.md

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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results