Accessibility Audit Skill

Comprehensive WCAG 2.2 Level AA accessibility auditing for React/TypeScript applications with MUI framework awareness.

Quick Reference

Severity	Impact	Examples
Critical	Blocks access completely	Keyboard traps, missing alt on actions, no focus visible
High	Significantly degrades UX	Poor contrast on CTAs, no skip navigation, small touch targets
Medium	Minor usability impact	Missing autocomplete, unclear link text
Low	Best practice enhancement	Could add tooltips, more descriptive titles

Key Principle

Severity = Impact x Likelihood, NOT WCAG conformance level. A Level A failure can be LOW severity; a Level AA failure can be CRITICAL.

Required Tooling

# Install required tools
npm install --save-dev eslint-plugin-jsx-a11y jest-axe @axe-core/playwright

# Configure ESLint
# Add to .eslintrc: extends: ['plugin:jsx-a11y/recommended']

Workflow

Phase	Description
1. Setup	Install tooling, create output directories
2. Static Analysis	ESLint jsx-a11y scan
3. Runtime Analysis	jest-axe and Playwright
4. Manual Validation	Keyboard, screen reader, contrast
5. Report Generation	JSON + Markdown outputs

Phase 1: Setup

See workflow/setup.md for installation and configuration.

Phase 4: Manual Validation

See workflow/manual-validation.md for keyboard and screen reader testing.

Reference

Severity Rubric - Impact x Likelihood calculation
MUI Framework Awareness - Built-in accessibility features

Common False Positives to Avoid

Component	Built-in Behavior	Don't Flag
MUI `<SvgIcon>`	Auto `aria-hidden="true"`	Icons without titleAccess
MUI `<Alert>`	Default `role="alert"`	Missing role attribute
MUI `<Button>`	36.5px min height	Target size < 44px
MUI `<TextField>`	Auto label association	Missing label
MUI `<Autocomplete>`	Manages ARIA attrs	Missing aria-expanded

Quick Audit Command

Run accessibility audit on [component/page] following WCAG 2.2 AA standards

codebase-auditor - General code quality analysis
bulletproof-react-auditor - React architecture review

2.7 KiB Raw Blame History