Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
Guide · accessibility a11y

Best Accessibility Skills for Claude Code (2026)

The web-design-guidelines skill (390,792 installs, skills.sh registry) is Claude Code number-one accessibility resource - a WCAG 2.2-aligned design reference loaded into the agent context. For automated auditing, the audit skill (82,732 installs, 35,911 stars) catches contrast failures, ARIA violations, and keyboard-navigation gaps on every code generation pass.

By Skillselion, an Ellelion LLC publication · Updated June 15, 2026 · 5 min read · Stats verified against the live catalog

The web-design-guidelines skill (390,792 installs, skills.sh registry) is Claude Code's #1 accessibility resource - a massive WCAG-aligned design reference loaded directly into the agent's context. For automated a11y auditing, audit (82,732 installs) catches contrast failures, ARIA violations, and keyboard-navigation gaps on every code generation pass.

Why is accessibility a critical Claude Code skill in 2026?

Two forces have made accessibility non-negotiable: regulation and AI coding scale. The European Accessibility Act came into force June 2025, requiring all digital products sold in the EU to meet WCAG 2.1 AA. US Section 508 enforcement has expanded. For products reaching any significant market, accessibility failures are now legal liabilities.

The second force is velocity. Claude Code can generate hundreds of components in a session. Without an accessibility skill installed, each generated component may ship with contrast failures, missing aria-label attributes, broken focus order, or non-interactive elements used as buttons. Errors that a developer reviewing one component might catch are invisible at generation scale.

The solution is moving accessibility left: loading WCAG rules into Claude Code's context as a skill, so every component it generates starts accessible rather than requiring a remediation pass.

The skills.sh catalog (25,053 total listings, 81,930,457 total installs) shows the accessibility skill cluster at extraordinary scale - web-design-guidelines alone (390,792 installs) is the single most-installed design skill in the entire catalog.

Which accessibility skills rank highest on skills.sh?

`web-design-guidelines` - 390,792 installs, 27,714 GitHub stars. The catalog's most-installed design skill by a factor of two. It loads a comprehensive WCAG 2.2-aligned design reference - colour contrast ratios, touch target minimums (44×44px per WCAG 2.5.8), focus indicator requirements, form labelling standards, heading hierarchy rules, and image alt-text conventions - directly into Claude Code's context. With this skill, every component the agent generates starts from a WCAG-informed baseline.

`audit` - 82,732 installs, 35,911 stars. The audit skill. It runs Claude Code through a structured accessibility review of generated code: checks colour contrast using WCAG 3.0 APCA scores, validates ARIA role-value pairs, identifies interactive elements missing keyboard event handlers, and finds missing form labels. Run it after generation sessions to catch regressions before they reach a browser.

`accessibility` - 28,457 installs, 2,191 stars. A focused WCAG 2.1 / 2.2 compliance skill. Covers the 78 success criteria at Level A and AA, gives Claude Code specific remediation patterns for each, and teaches the agent to generate role, aria-*, tabIndex, and aria-live attributes correctly. The most targeted pure-accessibility skill in the catalog.

`fixing-accessibility` - 12,985 installs, 2,058 stars. A remediation-first skill for existing codebases. Where accessibility shapes new generation, fixing-accessibility audits existing components and generates patches: adding missing labels, fixing colour tokens, restructuring heading hierarchies, and replacing <div onClick> with <button>. Use this when bringing a legacy codebase up to WCAG compliance.

`web-design-reviewer` - 11,446 installs, 34,620 stars. A holistic design review skill that combines accessibility checking with visual design quality feedback. It catches WCAG violations alongside pure aesthetic issues (poor visual hierarchy, inconsistent spacing, missing hover states). Useful for agencies and teams where designers and developers work from the same Claude Code session.

`accessibility-review` - 1,967 installs, 19,630 stars. A dedicated code-review skill focused on accessibility. It generates a structured report (success criteria checked, violations found, remediation steps) rather than auto-patching. Useful when you want an audit artifact for documentation or compliance reporting.

What WCAG criteria does Claude Code cover with these skills?

With web-design-guidelines (390,792 installs) and accessibility (28,457 installs) installed together, Claude Code addresses the most critical WCAG 2.2 success criteria:

  • 1.1.1 Non-text Content (Level A) - alt attributes on all images, including descriptive alt text for informational images and alt="" for decorative ones
  • 1.4.3 Contrast (Minimum, Level AA) - 4.5:1 ratio for normal text, 3:1 for large text
  • 1.4.11 Non-text Contrast (Level AA) - 3:1 ratio for UI components and graphical objects
  • 2.1.1 Keyboard (Level A) - all interactive elements reachable and operable via keyboard
  • 2.4.3 Focus Order (Level A) - focus moves in a logical sequence matching reading order
  • 2.5.3 Label in Name (Level A) - accessible names include the visible label text
  • 4.1.2 Name, Role, Value (Level A) - ARIA roles, states, and properties set correctly on custom widgets

How does accessibility pair with shadcn/ui?

shadcn/ui is built on Radix UI, which handles the ARIA specification for core interactive patterns (Dialog, Select, Combobox, Menu) internally. This means most shadcn components are accessible by construction - keyboard navigation, focus management, and ARIA roles come from Radix, not from generated code.

Where accessibility skills add the most value on shadcn projects is in:

  • Custom layouts - page structure (heading hierarchy, landmark regions) is not covered by Radix
  • Data tables - complex tables need explicit scope, headers, and caption attributes
  • Forms - field associations (htmlFor / id pairs, aria-describedby for error messages) require attention
  • Animation - prefers-reduced-motion checks (see Best Web Animation Skills)

How does accessibility work at scale with Claude Code?

The most effective workflow is layered:

1. Install web-design-guidelines (390,792 installs) as a baseline - every generation session starts WCAG-informed. 2. Add accessibility (28,457 installs) for detailed criterion-level rules. 3. Run audit (82,732 installs) at the end of each feature to catch anything that slipped through. 4. For legacy codebases, run fixing-accessibility (12,985 installs) as a remediation sweep.

For shadcn/ui projects, see Best shadcn/ui Skills for Claude Code. For design system integration, see Best Design System Skills for Claude Code.

Key takeaways

  • `web-design-guidelines` (390,792 installs, skills.sh registry) is the most-installed design skill in the entire catalog - it loads WCAG 2.2 design rules into every Claude Code generation session.
  • `audit` (82,732 installs) provides automated a11y auditing: contrast, ARIA, keyboard navigation, and form labels checked on every code output.
  • `fixing-accessibility` (12,985 installs) is the remediation tool for legacy codebases - it patches existing components to meet WCAG AA.
  • The European Accessibility Act (June 2025) and expanding Section 508 enforcement make a11y compliance a legal requirement, not just best practice.
  • Pair with animation skills (for prefers-reduced-motion), design systems (for contrast tokens), and shadcn/ui (for Radix-based accessible primitives).
accessibility
accessibility

Browse all accessibility skills at skillselion.com/browse or jump directly to the `accessibility` skill page.

FAQ

Common questions

What is the best accessibility skill for Claude Code?

web-design-guidelines at 390,792 installs is the most-installed design skill in the entire skills.sh catalog. It loads WCAG 2.2 design rules into every Claude Code generation session. Pair with audit at 82,732 installs for post-generation checking.

What WCAG criteria does Claude Code cover?

With web-design-guidelines and accessibility skills installed, Claude Code covers WCAG 2.2 Level A and AA: alt text, contrast ratios of 4.5 to 1 for text, non-text contrast of 3 to 1, keyboard navigation, focus order, and ARIA roles.

Does shadcn handle accessibility automatically?

For standard interactive components like Dialog, Select, and Combobox, yes. shadcn is built on Radix UI which implements WAI-ARIA patterns internally. For page structure like headings, landmarks, tables, and forms, accessibility skills are required.

How do I fix accessibility in an existing codebase?

Install fixing-accessibility at 12,985 installs. It audits existing components and generates patches: adds missing labels, fixes color tokens, restructures heading hierarchies, and replaces div onClick with button elements.

Is accessibility legally required in 2026?

Yes. The European Accessibility Act came into force June 2025 requiring WCAG 2.1 AA for all digital products in the EU. US Section 508 enforcement has also expanded. Accessibility failures are now legal liabilities.

Ranked by Skillselion - an independent directory of AI-coding tools, not affiliated with Anthropic, OpenAI or Cursor. Tool rankings reflect real adoption (installs, then GitHub stars) from the skills.sh registry and GitHub, last updated June 15, 2026.

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.