Accessibility

A solid reference for WCAG 2.1 compliance that covers the POUR principles with practical code examples. You get real patterns for common accessibility issues: proper alt text for complex images, focus trap management for modals, color contrast ratios with actual numbers, and the visually-hidden CSS trick that shows up in every a11y toolkit. The examples show both wrong and right implementations, which is helpful when you're debugging why a screen reader isn't announcing something. Includes aria-live regions for form errors, prefers-reduced-motion media queries, and skip links. This is the kind of skill you'd reach for during an accessibility audit or when you need to explain to a designer why 3:1 contrast matters for UI components.

skills.sh installs: 362
GitHub stars: 33.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add davila7/claude-code-templates --skill accessibility --agent claude-code

Installs into .claude/skills of the current project.

Files

Accessibility (a11y)

Comprehensive accessibility guidelines based on WCAG 2.1 and Lighthouse accessibility audits. Goal: make content usable by everyone, including people with disabilities.

WCAG Principles: POUR

Principle	Description
Perceivable	Content can be perceived through different senses
Operable	Interface can be operated by all users
Understandable	Content and interface are understandable
Robust	Content works with assistive technologies

Conformance levels

Level	Requirement	Target
A	Minimum accessibility	Must pass
AA	Standard compliance	Should pass (legal requirement in many jurisdictions)
AAA	Enhanced accessibility	Nice to have

Perceivable

Text alternatives (1.1)

Images require alt text:

<!-- ❌ Missing alt -->
<img src="chart.png">

<!-- ✅ Descriptive alt -->
<img src="chart.png" alt="Bar chart showing 40% increase in Q3 sales">

<!-- ✅ Decorative image (empty alt) -->
<img src="decorative-border.png" alt="" role="presentation">

SKILL.md on GitHub