skills.rest
Expanly
ExpanlyOFFICIAL
Explore all skills by this author →
WebsiteGitHub

accessibility-design

Design accessible React interfaces meeting WCAG standards.

Updated Aug 23, 2026
Search Tags:#design#accessibility#a11y#react#wcag#screen-reader#keyboard-navigation
One-click install
npx skills add https://github.com/Expanly/expanly-claude-code-agents --skill accessibility-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-design
Source: https://github.com/Expanly/expanly-claude-code-agents/tree/main/plugins/ui-designer/skills/accessibility-design
Command: npx skills add https://github.com/Expanly/expanly-claude-code-agents --skill accessibility-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams build inclusive React interfaces that comply with WCAG guidelines, reducing accessibility debt and improving usability for all users.

Core Features & Use Cases

  • Keyboard navigation and focus management across components to support power users and assistive tech.
  • Color contrast auditing and the use of accessible color tokens to ensure readability.
  • Semantic HTML structure and ARIA patterns for screen readers to interpret UI correctly.
  • Real-world scenario: converting a legacy component library to WCAG-compliant variants in a dashboard app.

Quick Start

Start by auditing an existing React component for focus visibility, color contrast, and proper labeling, then apply the patterns described in this guide to implement accessible components.

Frequently Asked Questions about accessibility-design

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

FAQPage Schema
How do I make my React components meet WCAG standards?▼

To make React components meet WCAG standards, you must implement semantic HTML, proper ARIA patterns, keyboard navigation, and sufficient color contrast. This ensures UI elements are readable and operable by assistive technologies like screen readers.

What is the best way to add keyboard navigation to a React UI?▼

The best way to add keyboard navigation is by enforcing focus visibility and logical tab order across your React components. Managing focus states ensures power users and those relying on keyboards can navigate interfaces without a mouse.

How do I use ARIA patterns to fix screen reader issues in React?▼

You fix screen reader issues in React by applying ARIA patterns alongside semantic HTML structure to correctly associate labels and convey UI state changes. This allows screen readers to accurately interpret and announce interface elements to users.

Does my React app need accessible color tokens to pass WCAG contrast audits?▼

Yes, your React app needs accessible color tokens to pass WCAG contrast audits and ensure text readability. Auditing color combinations against WCAG requirements prevents accessibility debt and improves usability for visually impaired users.

Can I convert a legacy React component library to be WCAG compliant?▼

Yes, you can convert a legacy React component library to be WCAG compliant by auditing existing components for focus visibility, color contrast, and labeling. Applying targeted ARIA and semantic HTML patterns updates them for dashboard environments.

Related Skills

Explore More Design & Creative Skills→
DevanBDevanB

Frontend Accessibility

Identify and remediate accessibility issues in React UI components.

Community
Basic
calcosmiccalcosmic
9

accessibility

Audit frontend components for WCAG 2.2 AA accessibility compliance.

Community
Advanced
xvawlxvawl
1

ui-design-system

Establish scalable UI design systems with tokens and shadcn/ui for React/TypeScript projects.

Community
Advanced
Nickalus12Nickalus12
2

a11y-audit

Audit Loom-style applications for WCAG violations and ARIA usage.

Community
Advanced