skills.rest
caraya
carayaCOMMUNITY
Explore all skills by this author →
Website𝕏@elrond25GitHub

accessibility-react

Apply keyboard navigation, ARIA patterns, and focus management to React UIs.

1|Updated Mar 22, 2026
Search Tags:#accessibility#a11y#react#wcag#aria#keyboard-navigation#focus-management
One-click install
npx skills add https://github.com/caraya/agent-skills --skill accessibility-react
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-react
Source: https://github.com/caraya/agent-skills/tree/main/skills/accessibility-react
Command: npx skills add https://github.com/caraya/agent-skills --skill accessibility-react

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about accessibility-react

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

FAQPage Schema
How do I add ARIA attributes to React components for WCAG 2.2 AA compliance?▼

Add ARIA attributes in JSX by applying aria-label, aria-live, and other roles directly to React components to meet WCAG 2.2 AA compliance. This improves screen reader support for dynamic UI updates and interactive elements.

How do I manage focus in React modals and dialogs using refs?▼

Manage focus in React modals and dialogs by using refs and effects to trap and restore focus. This ensures keyboard navigation remains within the dialog while it is open and returns focus to the triggering element upon closure.

What's the best way to implement keyboard navigation in React dashboards?▼

Implement keyboard navigation in React dashboards by ensuring all interactive components are focusable and operable via keyboard. This involves managing proper focus order and visible focus rings for accessible user interaction.

How do I create accessible empty and error states in React forms?▼

Create accessible empty and error states in React forms by providing meaningful feedback using ARIA attributes. This ensures screen readers properly announce validation errors and empty data states to users during interaction.

Can I refactor an existing React project to meet accessibility standards without rebuilding?▼

Yes, you can refactor existing React projects to meet accessibility standards. Apply focus management, ARIA patterns, and keyboard navigation to current components like dashboards and forms to ensure inclusive, screen-reader-friendly interactions.

Why does my React dynamic content fail screen reader announcements?▼

Dynamic content in React fails screen reader announcements when it lacks proper ARIA attributes. Use aria-live regions in your JSX to ensure assistive technologies automatically detect and read out dynamically updated content.

Related Skills

Explore More Software Engineering Skills→
ihj04982ihj04982

hoist-static-jsx-elements

Hoist static JSX elements outside React components to prevent re-creation during renders.

Community
Basic
sigmadigitalzasigmadigitalza
1

frontend-accessibility-review

Audit web frontends for WCAG 2.2 AA conformance with static and live checks.

Official
Advanced
alinur527alinur527

ckm:ui-styling

Create accessible React interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic