skills.rest
AlexanderStephenThompson
AlexanderStephenThompsonCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-accessibility

Implement WCAG 2.1 AA accessibility patterns in React applications.

Updated Aug 23, 2026
Search Tags:#accessibility#a11y#React#ARIA#WCAG#keyboard#focus-management
One-click install
npx skills add https://github.com/AlexanderStephenThompson/claude-hub --skill web-accessibility-alexanderstephenthompson
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-accessibility
Source: https://github.com/AlexanderStephenThompson/claude-hub/tree/main/web/skills/web-accessibility
Command: npx skills add https://github.com/AlexanderStephenThompson/claude-hub --skill web-accessibility-alexanderstephenthompson

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React accessibility patterns are hard to implement consistently across teams; this Skill provides guidance and ready-to-use patterns to achieve WCAG 2.1 AA compliance in React apps.

Core Features & Use Cases

  • Semantic HTML and landmarks, ARIA roles, and proper labeling to ensure assistive technologies can parse UI structure.
  • Keyboard navigation and focus management including modals, menus, and dynamic content to enable full keyboard operability.
  • Color contrast, reduced motion, and live regions to accommodate users with visual and motion sensitivities.
  • Use Case: retrofit an existing React component library to meet WCAG AA standards and improve overall accessibility.

Quick Start

Audit your React components for semantic HTML, add ARIA attributes where needed, implement focus traps in modals, ensure keyboard operability, and verify color contrast and motion preferences.

Frequently Asked Questions about web-accessibility

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

FAQPage Schema
How do I make a React modal dialog accessible with keyboard focus management?▼

To make a React modal accessible, implement a focus trap that captures keyboard navigation within the dialog, use ARIA roles for semantic structure, and return focus to the triggering element upon closing.

What are the WCAG 2.1 AA requirements for color contrast and reduced motion in React apps?▼

WCAG 2.1 AA color contrast requires a 4.5:1 ratio for text, while reduced motion involves respecting user preferences to minimize animations and dynamic content transitions in React applications.

How do I retrofit an existing React component library to meet WCAG accessibility standards?▼

Retrofit React component libraries by auditing semantic HTML, adding ARIA roles and labels, implementing keyboard operability for menus and forms, and verifying color contrast and motion preferences.

When do I need to use ARIA roles in React components?▼

You need ARIA roles in React components when semantic HTML is insufficient to convey UI structure to assistive technologies, particularly for dynamic content like menus, modals, and live regions.

Does standard React tooling support keyboard navigation and focus management for dynamic content?▼

Yes, standard React tooling supports keyboard navigation and focus management by utilizing synthetic events, refs, and standard DOM APIs to manage focus across dynamic content and interactive elements.

Why is semantic HTML important for accessibility in React applications?▼

Semantic HTML is important for React accessibility because it allows assistive technologies to accurately parse UI structure and landmarks, ensuring proper navigation without relying solely on ARIA attributes.

Related Skills

Explore More Software Engineering Skills→
AleksanderEvensenAleksanderEvensen

shadcn-ui

Install and configure shadcn/ui React components with Radix UI accessibility.

Community
Intermediate
Anuj23105Anuj23105
1

accessibility-auditing

Tests web page and UI component accessibility compliance with WCAG 2.1 AA/AAA standards.

Community
Advanced
cheatcode-aicheatcode-ai
15

webapp-testing

Automate local web application testing with Playwright and headless Chromium.

Official
Intermediate
SlanyCukrSlanyCukr
2

radix-ui

Provides accessible, unstyled React primitives with built-in ARIA and keyboard navigation for building UI components.

Community
Intermediate