a11y-rules

What problem does it solve?

Helps developers and reviewers ensure React and Next.js UI components meet WCAG 2.2 AA accessibility requirements by providing a practical, component-focused checklist and implementation patterns for semantics, ARIA, focus handling, keyboard navigation, media, forms, contrast, and automated testing.

Core Features & Use Cases

• Semantic-first guidance for using native HTML elements before adding ARIA.
• ARIA patterns & attributes for icon buttons, dialogs, live regions, and error descriptions.
• Focus management & keyboard UX including focus traps, restore-on-close, skip links, and keyboard interaction models for widgets.
• Media and images advice for descriptive alt text, captions, and decorative assets.
• Forms & validation patterns with accessible labels, fieldset/legend grouping, aria-invalid, and alert-driven error announcements.
• Testing workflows with axe-core and Lighthouse plus keyboard-interaction tests to validate behavior.
• Use case: During a code review, run the checklist and tests to fix a modal that lacks focus trapping, missing aria-labels on icon buttons, and insufficient color contrast.

Quick Start

Use the a11y-rules skill to audit a React component, list accessibility violations, and produce a prioritized fix checklist.