accessibility

Overview

A Claude Code skill for auditing and improving web accessibility following WCAG 2.1 guidelines and Lighthouse accessibility audit standards. It provides comprehensive coverage of the POUR principles (Perceivable, Operable, Understandable, Robust) with concrete code examples for alt text, color contrast, keyboard navigation, and assistive technology compatibility.

Key Features

• WCAG 2.1 Compliance - Covers all three conformance levels (A, AA, AAA) with specific requirements and code examples for each
• Color Contrast Reference - Precise contrast ratio requirements for normal text, large text, and UI components with CSS examples showing good and bad practices
• Alt Text Patterns - Detailed examples for images, icon buttons, decorative images, and complex infographics with proper aria attributes
• Visually Hidden Text - Ready-to-use CSS class for screen reader-only content that maintains accessibility without visual impact
• Focus State Management - Guidance on focus-visible outlines with proper contrast for keyboard navigation compliance

Who is this for?

This skill is essential for frontend developers and web designers who need to ensure their applications meet accessibility standards. It is particularly valuable for teams working toward WCAG AA compliance (a legal requirement in many jurisdictions) who need practical, copy-paste-ready code patterns rather than abstract guidelines.