Accessibility Audit
Iron Law: Before auditing any component, READ the actual file first.
Do not flag violations based on memory — verify at file:line and show evidence.
WCAG 2.1 AA compliance audit for Angular 21.x and Flutter 3.41.x. Use to audit UI components, establish automated testing, identify accessibility barriers, and prepare compliance evidence.
When to Use
- Auditing Angular or Flutter UI for WCAG 2.1 AA compliance
- Adding automated accessibility tests to CI/CD
- Identifying and remediating accessibility barriers
- Preparing compliance evidence for stakeholders
- Reviewing a PR that adds UI components
Do Not Use
- For general UI design review without accessibility scope
- For backend services with no UI (Java, NestJS, Python, FastAPI)
- When you cannot access the UI files or artifacts
Process
- Confirm scope — which components, pages, or user journeys to audit
- Run automated scan — axe-core (Angular) or flutter_test semantics (Flutter) for baseline violations
- Perform manual checks — keyboard, screen reader, focus order, contrast
- Map findings to WCAG criteria — severity (Critical / Important / Suggestion) and WCAG criterion
- Provide remediation — exact code fixes with file:line evidence
- Re-test after fixes — confirm each finding is resolved
Reference Files
| File |
Contents |
Load When |
reference/angular-a11y-automated.md |
axe-core Angular integration, keyboard trap detection, heading structure validation, pa11y |
Adding automated a11y tests to Angular project |
reference/flutter-a11y-automated.md |
flutter_test semantics testing, SemanticsController patterns, widget test accessibility |
Adding automated a11y tests to Flutter project |
reference/manual-testing-checklist.md |
Keyboard, screen reader, visual, cognitive manual checklists for both stacks |
Running manual audit session |
reference/cicd-integration.md |
GitHub Actions workflows for Angular (axe + pa11y) and Flutter (semantic tests) |
Integrating a11y into CI/CD pipeline |
Existing Platform Checklists
These checklists already exist in the workspace — load them during audit:
- Angular:
.claude/skills/angular-spa/reference/accessibility-checklist.md — WCAG 2.1 AA checklist, ARIA patterns
- Flutter:
.claude/skills/flutter-mobile/reference/accessibility-audit-checklist.md — Semantics, contrast, touch targets, focus management
- UI Patterns:
.claude/skills/ui-standards-tokens/reference/ui-accessibility-patterns.md — Flutter Semantics, FocusTraversalGroup, SemanticsService code patterns
Output Format
## Accessibility Audit — [Component/Page Name]
### Critical (Blocks users with disabilities)
- **[A11Y-001]** [Short description]
- File: `path/to/file.dart:42` or `path/to/component.html:18`
- WCAG: [criterion, e.g. 1.1.1 Non-text Content]
- Issue: [what is wrong]
- Fix: [exact code fix]
### Important (Degrades experience significantly)
- **[A11Y-002]** [Short description]
- File: `path/to/file:line`
- WCAG: [criterion]
- Issue: [what is wrong]
- Fix: [exact code fix]
### Suggestions (Enhances experience)
- **[A11Y-003]** [Short description]
- File: `path/to/file:line`
- Recommendation: [what to add/improve]
### Audit Summary
- Automated scan: [axe violations count] / [flutter semantics findings count]
- Manual checks: [passed/failed per category]
- WCAG 2.1 AA: [PASS / FAIL — N critical, N important]
Agents
accessibility-auditor — WCAG 2.1 compliance, Semantics widgets, touch targets, focus, contrastui-standards-expert — design token usage, Material 3 theming, interaction contracts
1---2name: accessibility-audit3description: WCAG 2.1 AA accessibility audit skill for Angular 21.x and Flutter 3.41.x. Use when auditing UI for accessibility compliance, identifying barriers, establishing automated testing, or preparing compliance evidence. Covers axe-core automated scanning, keyboard navigation, screen reader compatibility, color contrast, cognitive accessibility, and CI/CD integration.4---56# Accessibility Audit78> **Iron Law:** Before auditing any component, READ the actual file first.9> Do not flag violations based on memory — verify at file:line and show evidence.1011WCAG 2.1 AA compliance audit for Angular 21.x and Flutter 3.41.x. Use to audit UI components, establish automated testing, identify accessibility barriers, and prepare compliance evidence.1213## When to Use1415- Auditing Angular or Flutter UI for WCAG 2.1 AA compliance16- Adding automated accessibility tests to CI/CD17- Identifying and remediating accessibility barriers18- Preparing compliance evidence for stakeholders19- Reviewing a PR that adds UI components2021## Do Not Use2223- For general UI design review without accessibility scope24- For backend services with no UI (Java, NestJS, Python, FastAPI)25- When you cannot access the UI files or artifacts2627## Process28291. **Confirm scope** — which components, pages, or user journeys to audit302. **Run automated scan** — axe-core (Angular) or flutter_test semantics (Flutter) for baseline violations313. **Perform manual checks** — keyboard, screen reader, focus order, contrast324. **Map findings to WCAG criteria** — severity (Critical / Important / Suggestion) and WCAG criterion335. **Provide remediation** — exact code fixes with file:line evidence346. **Re-test after fixes** — confirm each finding is resolved3536## Reference Files3738| File | Contents | Load When |39|------|----------|-----------|40| `reference/angular-a11y-automated.md` | axe-core Angular integration, keyboard trap detection, heading structure validation, pa11y | Adding automated a11y tests to Angular project |41| `reference/flutter-a11y-automated.md` | flutter_test semantics testing, SemanticsController patterns, widget test accessibility | Adding automated a11y tests to Flutter project |42| `reference/manual-testing-checklist.md` | Keyboard, screen reader, visual, cognitive manual checklists for both stacks | Running manual audit session |43| `reference/cicd-integration.md` | GitHub Actions workflows for Angular (axe + pa11y) and Flutter (semantic tests) | Integrating a11y into CI/CD pipeline |4445## Existing Platform Checklists4647These checklists already exist in the workspace — load them during audit:4849- **Angular**: `.claude/skills/angular-spa/reference/accessibility-checklist.md` — WCAG 2.1 AA checklist, ARIA patterns50- **Flutter**: `.claude/skills/flutter-mobile/reference/accessibility-audit-checklist.md` — Semantics, contrast, touch targets, focus management51- **UI Patterns**: `.claude/skills/ui-standards-tokens/reference/ui-accessibility-patterns.md` — Flutter Semantics, FocusTraversalGroup, SemanticsService code patterns5253## Output Format5455```markdown56## Accessibility Audit — [Component/Page Name]5758### Critical (Blocks users with disabilities)59- **[A11Y-001]** [Short description]60 - File: `path/to/file.dart:42` or `path/to/component.html:18`61 - WCAG: [criterion, e.g. 1.1.1 Non-text Content]62 - Issue: [what is wrong]63 - Fix: [exact code fix]6465### Important (Degrades experience significantly)66- **[A11Y-002]** [Short description]67 - File: `path/to/file:line`68 - WCAG: [criterion]69 - Issue: [what is wrong]70 - Fix: [exact code fix]7172### Suggestions (Enhances experience)73- **[A11Y-003]** [Short description]74 - File: `path/to/file:line`75 - Recommendation: [what to add/improve]7677### Audit Summary78- Automated scan: [axe violations count] / [flutter semantics findings count]79- Manual checks: [passed/failed per category]80- WCAG 2.1 AA: [PASS / FAIL — N critical, N important]81```8283## Agents8485- `accessibility-auditor` — WCAG 2.1 compliance, Semantics widgets, touch targets, focus, contrast86- `ui-standards-expert` — design token usage, Material 3 theming, interaction contracts
kumaran-is