Accessibility Audit
WCAG 2.1/2.2 accessibility compliance checker for comprehensive UI accessibility analysis.
6-Step Workflow
This tool analyzes accessibility across 6 domains aligned with WCAG success criteria.
Overview
The a11y_audit tool performs comprehensive accessibility analysis based on WCAG 2.1 and 2.2 guidelines. It evaluates UI components for proper ARIA usage, keyboard accessibility, focus management, color contrast, and semantic HTML structure.
Workflow Steps
1
Structural Analysis & Discovery
Component inventory, page structure, and landmark regions identification.
2
ARIA Labels & Attributes
ARIA roles, labels, descriptions, and live region implementations.
3
Keyboard Navigation
Tab order, keyboard shortcuts, skip links, and interactive element accessibility.
4
Focus Management
Focus indicators, focus trapping, modal focus, and focus restoration.
5
Visual Accessibility & Color Contrast
Color contrast ratios, text sizing, motion preferences, and visual indicators.
6
Semantic HTML & WCAG Compliance
HTML semantics, heading hierarchy, form labels, and overall WCAG compliance.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
| step_number integer |
Required | Current step number (1-6) | |
| next_step_required boolean |
Required | Set to false on step 6 to generate report |
|
| files_examined array[string] |
Required | List of file paths examined (HTML, JSX, Vue, etc.) | |
| confidence string |
Required | Confidence level | |
| continuation_id string |
After step 1 | UUID from step 1 response | |
| accessibility_findings array[object] |
Optional | Accessibility issues found in this step | |
| accessibility_assessments object |
Optional | Positive accessibility observations | |
Finding Format
json
{
"severity": "high",
"wcag_criterion": "1.1.1",
"category": "ARIA",
"description": "Image missing alt text",
"affected_files": ["src/components/Hero.tsx"],
"affected_elements": ["img.hero-image"],
"remediation": "Add descriptive alt attribute to image",
"wcag_level": "A"
}Categories
- ARIA - ARIA roles, labels, and attributes
- Keyboard - Keyboard navigation and shortcuts
- Focus - Focus management and indicators
- Contrast - Color contrast and visual accessibility
- Semantic - HTML semantics and structure
WCAG Levels
- Level A - Minimum accessibility (must have)
- Level AA - Standard accessibility (should have)
- Level AAA - Enhanced accessibility (nice to have)
Common WCAG Criteria
| Criterion | Name | Level |
|---|---|---|
1.1.1 | Non-text Content | A |
1.3.1 | Info and Relationships | A |
1.4.3 | Contrast (Minimum) | AA |
2.1.1 | Keyboard | A |
2.4.3 | Focus Order | A |
2.4.7 | Focus Visible | AA |
4.1.2 | Name, Role, Value | A |
Example Usage
MCP Tool Call
a11y_audit(
step_number=2,
continuation_id="uuid-from-step-1",
next_step_required=true,
files_examined=["src/components/Button.tsx", "src/components/Modal.tsx"],
confidence="medium",
accessibility_findings=[
{
"severity": "high",
"wcag_criterion": "4.1.2",
"category": "ARIA",
"description": "Button missing accessible name",
"affected_files": ["src/components/Button.tsx"],
"affected_elements": ["button.icon-only"],
"remediation": "Add aria-label or visible text",
"wcag_level": "A"
}
],
accessibility_assessments={
"Keyboard": "All interactive elements are keyboard accessible"
}
)Output
Generates reports/NNN_A11Y_AUDIT_REPORT.md with:
- WCAG compliance summary by level (A, AA, AAA)
- Findings grouped by category
- Affected elements and remediation steps
- Positive accessibility practices identified