Purpose

Detect and fix accessibility violations in React components so that users with disabilities — including those who rely on screen readers, keyboard-only navigation, or high-contrast modes — can use the application effectively.

All guidance targets WCAG 2.1 AA compliance unless the user requests AAA.

Workflow

1. Gather scope

Determine which files to audit:

If the user provides specific files or components, audit those.
If the user says "audit the project", search for *.tsx and *.jsx files under src/.
Prioritize interactive components (forms, modals, menus, tabs, dialogs) — they carry the highest a11y risk.

2. Run the four-dimension audit

Inspect every component against the four dimensions below. For each violation found,

Purpose

All guidance targets WCAG 2.1 AA compliance unless the user requests AAA.

Workflow

1. Gather scope

Determine which files to audit:

If the user provides specific files or components, audit those.
If the user says "audit the project", search for *.tsx and *.jsx files under src/.
Prioritize interactive components (forms, modals, menus, tabs, dialogs) — they carry the highest a11y risk.

2. Run the four-dimension audit

Inspect every component against the four dimensions below. For each violation found,

React Accessibility Audit

Purpose

Workflow

1. Gather scope

2. Run the four-dimension audit

React Accessibility Audit

Purpose

Workflow

1. Gather scope

2. Run the four-dimension audit

Extract Errors

Frontend Patterns

Coding Standards

Coding Standards

Coding Standards

Frontend Patterns