Skip to main content
affpapa.org
RU EN
skill

accessibility · davila7 — Claude Code skill: accessibility checks and setup

This skill guides Claude Code through web accessibility reviews based on WCAG 2.1. Use it to inspect keyboard access, screen reader support, and interface elements.

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --skill development/accessibility
Open on GitHub

What accessibility does

The skill gives Claude Code guidance for reviewing web pages against WCAG 2.1. Its coverage includes image alternatives, color contrast, media captions, keyboard operation, visible focus, and the language declared for a page.

The guidance can help the agent spot issues and suggest code changes, such as naming an icon button for assistive technology or making a form error clear without relying on color alone. It also includes examples for modal focus, a link to the main content, and reduced-motion preferences.

These are review guidelines, not a guarantee that a site conforms to WCAG; the result depends on what the agent examines in the project. Install the skill in Claude Code with npx claude-code-templates@latest --skill development/accessibility.

What it helps with

  • find images that lack text alternatives
  • check contrast for text and interface controls
  • add keyboard handling to interactive elements
  • make keyboard focus visible
  • explain form errors without relying on color alone

Example prompts for the agent

  • Review this form page for WCAG 2.1 accessibility issues and suggest code changes.
  • Find interface controls that cannot be operated from the keyboard.
  • Check image alternatives and accessible names on icon buttons.

How to install accessibility

1claude-code-templates

npx claude-code-templates@latest --skill development/accessibility

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill accessibility -a claude-code

3Manually: put the files in place

~/.claude/skills/accessibility/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/accessibility/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about accessibility

How do I install accessibility in Claude Code?

Run npx claude-code-templates@latest --skill development/accessibility.

What does the accessibility skill do?

It guides web accessibility reviews based on WCAG 2.1 and helps suggest fixes. Topics include contrast, keyboard access, focus, and media alternatives.

Does accessibility cover keyboard navigation?

Yes. Its guidance covers keyboard operation, visible focus, and avoiding focus traps in modal dialogs.

Similar skills

All skills for Frontend and UI →

accessibility by other authors comes first.

accessibility web-quality-skills This skill audits a rendered page for accessibility and points to the components behind each failure. Useful when a site has to meet WCAG 2.2 or survive a keyboard and screen reader pass. CX Codex +1 64,100installs accessibility affaan-m Designs and audits user interfaces to WCAG 2.2 Level AA across Web, iOS, and Android. It guides the model through semantic roles, focus states, and screen readers. CX Codex +1 5,100installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set495

The whole set →
pentest-checklist A skill that walks you through pentest planning: objectives, scope, environment prep, tester selection and monitoring. Useful before a security assessment. 336installs nextjs-scaffold Sets up a structured Next.js application with App Router, security headers, ESLint, and image optimization. 334installs create-database-migrations A Claude slash command that generates database migration files with versioning and rollback methods. Useful when you change a schema and don't want to hand-write up/down. 329installs nia-oracle A Claude subagent that finds repositories and documentation through Nia tools, indexes them, and pulls answers back out. 329installs domain-name-brainstormer Generates domain name ideas for your project and checks which ones are free across several TLDs. Handy when you are naming a new product or rebranding. 321installs react-patterns Get guidance on React components, hooks, state choices, and performance. Useful when building or refactoring a React interface with TypeScript. 321installs firebase This skill guides Firebase backend work across auth, databases, functions, storage, and hosting. Use it before choosing a data model or access rules. 321installs core-web-vitals This skill examines LCP, INP, and CLS and suggests code changes for loading, responsiveness, and layout stability. Use it when diagnosing weak page metrics. 315installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor