accessibility
npx machina-cli add skill cyberwalk3r/qa-toolkit/accessibility --openclawAccessibility Checker
Guided accessibility audit against WCAG 2.1. Read qa-artifacts/.qa-config.json for project context.
Input
Accept via $ARGUMENTS: page URL, feature name, or component description.
Workflow
- Select audit scope: full page, specific component, or entire user flow
- Run guided audit across WCAG categories:
- Perceivable: images have alt text, color contrast, text alternatives
- Operable: keyboard navigation, focus management, timing
- Understandable: labels, error messages, predictable behavior
- Robust: semantic HTML, ARIA usage, screen reader compatibility
- Generate manual test scripts in plain English
- Recommend automated tools for the detected tech stack
- Produce audit report
Manual Test Scripts
Generate step-by-step instructions anyone can follow:
1. TAB through the page from top to bottom
✅ PASS if: every interactive element receives visible focus
❌ FAIL if: focus disappears, skips elements, or has no visible indicator
2. With a screen reader (NVDA/VoiceOver), navigate the page
✅ PASS if: all content is announced in logical order
❌ FAIL if: images are skipped, buttons are unlabeled, or content is repeated
Output Structure
## Accessibility Audit: <page/feature>
Date: YYYY-MM-DD
Standard: WCAG 2.1 Level AA
### Summary
- Critical Issues: <count>
- Major Issues: <count>
- Minor Issues: <count>
### Findings
| # | Issue | WCAG Criterion | Severity | Location | Recommendation |
|---|-------|---------------|----------|----------|----------------|
### Manual Test Scripts
<numbered plain-language test steps>
### Recommended Tools
<based on project tech stack>
For full WCAG checklist, read references/wcag-checklist.md.
For manual test procedures, read references/manual-tests.md.
Save
Save to qa-artifacts/a11y-audits/a11y-YYYY-MM-DD-<page>.md
Suggested Next Steps
After generating the audit, suggest:
- "File each critical/major finding as a bug report with
/qa-toolkit:bug-report."
Source
git clone https://github.com/cyberwalk3r/qa-toolkit/blob/main/skills/accessibility/SKILL.mdView on GitHub Overview
Performs a guided WCAG 2.1 audit with plain-English manual test scripts. It lets you choose the audit scope, tests across Perceivable, Operable, Understandable, and Robust categories, and outputs a structured report with recommendations and tool suggestions.
How This Skill Works
Select the audit scope (full page, component, or user flow). Run a guided audit across WCAG categories and generate manual test scripts in plain English. Produce a formal audit report with findings and recommendations, plus automated-tool suggestions tailored to the project’s tech stack.
When to Use It
- Launching a new page or feature and aiming for WCAG 2.1 conformance
- Auditing an existing page to surface accessibility issues before release
- Assessing a specific component (e.g., modal, form) in isolation for accessibility
- Validating an entire user flow for keyboard and screen-reader compatibility
- Overhauling accessibility after legacy implementations or major design changes
Quick Start
- Step 1: Input the target URL, feature name, or component description to set the audit scope
- Step 2: Run the guided audit to cover WCAG Perceivable, Operable, Understandable, and Robust checks
- Step 3: Generate the plain-English manual test scripts and the final audit report, then save to qa-artifacts
Best Practices
- Define the audit scope up front (page, component, or flow)
- Run tests across all WCAG 2.1 categories: Perceivable, Operable, Understandable, Robust
- Use the plain-English manual test scripts to communicate findings to non-technical stakeholders
- Combine with automated tools appropriate to the project tech stack
- Produce a structured audit report and save artifacts in qa-artifacts
Example Use Cases
- Audit a product homepage for alt text and color contrast
- Evaluate a signup form for proper labeling and helpful error messages
- Test a modal dialog for focus trapping and announcements
- Navigate a page with a screen reader to verify logical content order
- Check a legacy site's ARIA usage and semantic HTML for robustness
