a11y-specialist-skills
日本語版 (Japanese)
Accessibility specialist skills plugin for Claude Code and Codex.
Provides accessibility review skills based on WCAG 2.2 & WAI-ARIA APG.
Skills
| Skill | Description |
|---|
| reviewing-a11y | Accessibility review for web pages, component implementations, design mockups, and specifications |
| auditing-wcag | Systematic WCAG 2.2 AA conformance auditing with automated test scripts |
| planning-wcag-audit | WCAG audit planning based on WAIC guidelines (page selection, test methods) |
| planning-a11y-improvement | Accessibility improvement planning with maturity assessment, roadmap, KPI design |
| implementing-a11y | Entry point for implementing UI components and pages after looking up "Judgment lines" and "When building" in a11y-knowledge |
| a11y-knowledge | Per-criterion knowledge base: rationale, judgment lines, build guidance, and how to read automated checks (referenced by the other skills) |
Installation
As a Claude Code Plugin
# Add marketplace
/plugin marketplace add masuP9/a11y-specialist-skills
# Install plugin
/plugin install a11y-specialist-skills@a11y-specialist-skills
As a Standalone Skill (Symlink)
# Clone the repository
git clone https://github.com/masuP9/a11y-specialist-skills.git
# Create symlink to your skills directory
ln -s /path/to/a11y-specialist-skills/skills/reviewing-a11y ~/.claude/skills/reviewing-a11y
For Development
# Test locally with --plugin-dir
claude --plugin-dir /path/to/a11y-specialist-skills
As a Codex Plugin (Recommended)
# Add the marketplace
codex plugin marketplace add masuP9/a11y-specialist-skills
# Start Codex and install a11y-specialist-skills from /plugins
codex
As a Standalone Codex Skill
# Clone the repository
git clone https://github.com/masuP9/a11y-specialist-skills.git
# Link the required skill into the Codex user skill directory
ln -s /path/to/a11y-specialist-skills/skills/reviewing-a11y ~/.agents/skills/reviewing-a11y
Usage
reviewing-a11y (Accessibility Review)
Claude Code and Codex automatically detect when to use the skill:
# Examples
Review accessibility
Check a11y
Accessibility review please
You can also provide specific targets:
# URL
Review a11y for https://example.com
# Local file
Check accessibility of src/components/Button.tsx
# Design spec
Review this design mockup from a11y perspective
You can also invoke it explicitly:
# Claude Code
/reviewing-a11y
# Codex
$reviewing-a11y
Review Output
The skill provides structured feedback including:
- Positive Findings: What's done well from an accessibility perspective
- Issues: Problems categorized by severity (Critical / Major / Minor)
- Location in code/page
- Description of the issue
- Related WCAG success criterion
- Suggested fix
- Manual Checks: Items that require human verification
auditing-wcag (WCAG Conformance Audit)
Perform systematic WCAG 2.2 AA conformance audits:
# Examples
Audit this page for WCAG compliance
Run WCAG audit on https://example.com
Check WCAG 2.2 AA conformance
You can also invoke it explicitly:
# Claude Code
/auditing-wcag
# Codex
$auditing-wcag
Audit Process
The skill guides through a 4-phase audit:
- Automated Checks: axe-core + custom Playwright scripts
- Interactive Checks: Keyboard, focus, pointer operations
- Manual Checks: Human verification items
- Content Review: Alt text, labels, headings quality
Includes automated test scripts for:
- Focus indicators (2.4.7, 2.4.11, 2.4.12, 3.2.1)
- Reflow at 320px (1.4.10)
- Text spacing (1.4.12)
- Target size (2.5.5, 2.5.8)
- And more...
npm package. The automated checks are published as
@a11y-skills/audit (this repo is a monorepo). The
auditing-wcag skill's scripts are thin wrappers around it, and you can use
the checks directly in your own Playwright project:
npm install -D @a11y-skills/audit. See the
package README.
planning-wcag-audit (Audit Planning)
Plan WCAG audits based on WAIC guidelines:
# Examples
Help me plan a WCAG audit
Create audit plan for our website
Select pages for accessibility testing
You can also invoke it explicitly:
# Claude Code
/planning-wcag-audit
# Codex
$planning-wcag-audit
Planning Output
- Page Selection: Representative pages based on WAIC methodology
- Test Methods: Automated vs manual test allocation
- Audit Plan Document: Formal audit plan template
planning-a11y-improvement (Improvement Planning)
Create organizational accessibility improvement plans:
# Examples
Help me plan accessibility improvements
Create an a11y strategy
Assess our organization's a11y maturity
You can also invoke it explicitly:
# Claude Code
/planning-a11y-improvement
# Codex
$planning-a11y-improvement
Planning Output
Collects information through interview format and generates:
- Maturity Assessment: Current level (L0-L4: Inactive / Ad hoc / Launch / Integrate / Optimize) with rationale
- Roadmap: Phased initiatives with owners
- KPI Design: Leading and lagging indicators
- Stakeholder Materials: Business impact and ROI
You can also load documents such as accessibility test results or initiative history for more accurate planning.
Development and Compatibility
Each skill uses one shared SKILL.md in Claude Code and Codex. The frontmatter keeps argument-hint and allowed-tools to preserve Claude Code input guidance and permissions. The supported Codex runtime tolerates these extensions and loads the same skill.
npm ci
npm run validate:skills
This repository uses the shared compatibility validator above as its CI gate. The general Codex quick_validate.py is not used because it rejects the Claude Code argument-hint extension.
References
License
MIT
