Skills
.Work. You
Rest

accessibility-design

Official

Design inclusive React UIs that meet WCAG.

Design & Creative#design#accessibility#a11y#react#wcag#screen-reader#keyboard-navigation
AuthorExpanly
Version1.0.0
Installs0

System Documentation

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.

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-design
Download link: https://github.com/Expanly/expanly-claude-code-agents/archive/main.zip#accessibility-design

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 223,000+ vetted skills library on demand.