Skills
.Work. You
Rest

accessibility-react

Community

Build accessible React UIs that meet WCAG.

Software Engineering#accessibility#a11y#react#wcag#aria#keyboard-navigation#focus-management
Authorcaraya
Version1.0.0
Installs0

System Documentation

What problem does it solve?

The React Accessibility skill helps teams ensure their UI components are usable by everyone, by applying keyboard navigation, ARIA patterns, focus management, and accessible states.

Core Features & Use Cases

  • Keyboard Navigation: Ensure all interactive components are focusable and operable via keyboard, including focus rings and proper focus order.
  • ARIA in JSX: Use aria-label, aria-live, and other ARIA attributes in React components to improve screen reader support.
  • Focus Management: Manage focus with refs and effects for modals, dialogs, and dynamic content updates.
  • Accessible Empty and Error States: Provide meaningful empty and error states for better accessibility feedback.
  • Responsive Design: Maintain accessibility across different viewports and assistive tech.
  • Patterns & Examples: Provide React-specific patterns for accessible components and practical examples.

Quick Start

Apply keyboard navigation, ARIA attributes, and focus management to a sample React component to observe improved accessibility.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: accessibility-react
Download link: https://github.com/caraya/agent-skills/archive/main.zip#accessibility-react

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.