a11y-specialist-skills

🥈Silver

Accessibility specialist skills plugin for Claude Code. Provides accessibility review skills based on WCAG 2.2 & WAI-ARIA APG. Benefits developers and QA teams by automating accessibility checks in web applications.

4000Updated 1mo ago

Intermediate30min to implementautomation

Saves ~30 min per use

Quick InstallView Source

git clone https://github.com/masuP9/a11y-specialist-skills.git

Works with:

Claude

Overview

About This Skill

How to Use

1. **Install the plugin**: Add `a11y-specialist-skills` to your Claude Code environment via the Skills Manager. Ensure you have Node.js v18+ and Chrome/Chromium installed for browser-based testing. 2. **Run the review**: Execute the prompt template in Claude Code, replacing [WEBSITE_URL] with your target URL (e.g., `http://localhost:3000` for local development). Specify [FOCUS_AREAS] to narrow the scope (e.g., 'keyboard navigation' for motor disability checks). 3. **Review the report**: The plugin generates a prioritized report with code snippets, remediation steps, and test cases. Save the output to a file (e.g., `a11y-report.md`) for your team. 4. **Integrate into workflow**: Add the plugin to your CI/CD pipeline (e.g., GitHub Actions) to run accessibility checks on pull requests. Use the `--focus-areas` flag to target specific components. 5. **Validate fixes**: After implementing remediation steps, rerun the review to confirm issues are resolved. Use the `--compare` flag to compare reports before/after changes. **Tips**: - For dynamic apps, use `--wait-for-network-idle` to ensure all elements load before testing. - Combine with manual testing using screen readers (NVDA, VoiceOver) for comprehensive coverage. - Prioritize Critical/High issues first, as they block users with disabilities from completing core tasks.

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/masuP9/a11y-specialist-skills

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Perform an automated accessibility review of the [WEBSITE_URL] using WCAG 2.2 AA and WAI-ARIA APG guidelines. Focus on [FOCUS_AREAS: screen reader compatibility, keyboard navigation, color contrast, form labels, or modal dialogs]. Generate a prioritized report with specific code snippets, remediation steps, and test cases for [DEVELOPMENT_TEAM]. Include severity ratings (Critical/High/Medium/Low) for each issue found.

Example Output

### Accessibility Review Report for Acme Corp Dashboard (acme-corp.com/dashboard)

**Summary**: 12 issues detected (3 Critical, 4 High, 5 Medium). The dashboard fails WCAG 2.2 AA compliance in several key areas impacting users with visual and motor disabilities.

**Critical Issues**:
1. **Missing ARIA Labels**: The "Export Data" button (id: export-btn) lacks an accessible name. Screen reader users hear "button" with no context. **Fix**: Add `aria-label="Export current dashboard data to CSV"` to the button element.

2. **Keyboard Trap**: The date picker modal (class: date-picker-modal) cannot be closed using keyboard-only navigation (Tab/Shift+Tab). Users are trapped in the modal. **Fix**: Add `aria-modal="true"` and implement `Escape` key handler to close the modal.

3. **Color Contrast Failure**: The "Low Stock" warning text (color: #ffcc00) has a contrast ratio of 2.8:1 against white background (fails 4.5:1 requirement). **Fix**: Change text color to #ff9900 or add a dark background overlay.

**High Priority Issues**:
- Form inputs in the "User Settings" panel lack associated `<label>` elements. Replace placeholder text with proper `<label for="input-id">` associations.
- The "Save Changes" button triggers a page reload without announcing success/failure to screen readers. Add `aria-live="polite"` region to notify users of status changes.

**Test Cases for QA**:
1. Navigate to the dashboard using only keyboard (Tab/Shift+Tab/Enter). Verify all interactive elements are reachable and operable.
2. Use NVDA or VoiceOver to verify screen reader announces all interactive elements with proper context.
3. Check color contrast ratios using the [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) for all text and interactive elements.

**Code Snippets**:
```html
<!-- Before -->
<button id="export-btn">Export</button>

<!-- After -->
<button id="export-btn" aria-label="Export current dashboard data to CSV">Export</button>
```

**Next Steps**:
- Prioritize fixes for Critical issues in the next sprint.
- Schedule a manual review with assistive technology users after code fixes are deployed.
- Add automated accessibility tests to the CI pipeline using axe-core or Playwright Axe.

**Resources**:
- WCAG 2.2 Quick Reference: https://www.w3.org/WAI/WCAG22/quickref/
- ARIA Authoring Practices Guide: https://www.w3.org/WAI/ARIA/apg/

---
*Generated by a11y-specialist-skills plugin for WCAG 2.2 AA compliance review.*