skills.rest
PMDevSolutions
PMDevSolutionsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

react-accessibility

Implement WCAG 2.2 Level AA accessible patterns in React applications.

7|1|Updated Mar 11, 2026
Search Tags:#accessibility#a11y#screen reader#keyboard navigation#react#wcag#aria
One-click install
npx skills add https://github.com/PMDevSolutions/Aurelius --skill react-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-accessibility
Source: https://github.com/PMDevSolutions/Aurelius/tree/main/.claude/skills/react-accessibility
Command: npx skills add https://github.com/PMDevSolutions/Aurelius --skill react-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the common pain point of building React applications that fail WCAG accessibility standards, exclude users with disabilities, and require costly retrofits after launch to meet compliance requirements.

Core Features & Use Cases

  • Accessible Component Patterns: Pre-built, WCAG 2.2 Level AA compliant implementations for modals, tabs, accordions, dropdown menus, and forms with full keyboard operability and screen reader support.
  • Testing & Validation Tools: ESLint configuration for automated linting, screen reader testing guidance, color contrast checking utilities, and a comprehensive accessibility testing checklist to catch issues early in the development cycle.
  • Use Case: When building a React customer portal, use this Skill to ensure all interactive elements like navigation menus, data tables, and form inputs are accessible to users with visual, motor, or cognitive disabilities.

Quick Start

Use the react-accessibility skill to add WCAG-compliant ARIA attributes and keyboard navigation to your React modal component to ensure it is usable by all users.

Frequently Asked Questions about react-accessibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a React modal accessible to screen readers?▼

To make a React modal accessible, you need to implement WCAG-compliant ARIA attributes and keyboard navigation. This ensures interactive elements are fully operable and compatible with assistive technologies.

How do I pass WCAG 2.2 Level AA compliance checks in a React application?▼

Passing WCAG 2.2 Level AA checks in React requires standardized accessible component patterns for interactive elements. This includes proper ARIA attribute usage, keyboard navigation support, and color contrast validation.

What is the best way to manage focus navigation in a React single-page application?▼

Managing focus in React single-page applications requires standardized accessible component patterns during interactive component construction. This ensures proper keyboard navigation and screen reader compatibility across view transitions.

Can I use automated accessibility testing to catch ARIA and keyboard issues in React?▼

Yes, you can integrate automated accessibility testing into React workflows using ESLint configuration for linting. This catches ARIA attribute usage and keyboard navigation issues early in the development cycle.

Do I need to retrofit forms for accessibility if I use standard React inputs?▼

Standard React inputs often require retrofitting to meet accessibility standards. Using pre-built accessible component patterns for forms ensures full keyboard operability and screen reader support from the start.

Why does my React dropdown menu fail keyboard navigation tests?▼

React dropdown menus fail keyboard navigation tests when they lack WCAG-compliant ARIA attributes and standardized accessible component patterns. Implementing full keyboard operability resolves these non-compliance issues.

Related Skills

Explore More Software Engineering Skills→
olehsvyrydovolehsvyrydov
13

frontend-reviewer

Automate React/TypeScript code review for style, accessibility, and linting gaps.

Community
Intermediate
KaakatiKaakati
2

accessibility-auditor

Audit web content against WCAG 2.2 AA standards with automated checks.

Community
Advanced
SAPSAP
294

a11y-audit

Audit UI components for WCAG AA accessibility compliance.

Official
Advanced
emilneuraz-aiemilneuraz-ai

accessibility

Audit WCAG 2.2 accessibility and generate prioritized remediation plans.

Community
Advanced