Can it help with color contrast issues?

Yes, it defines minimum contrast ratios (4.5:1 for normal text and 3:1 for large UI components) and provides patterns that ensure information isn't conveyed through color alone.

Does it support reduced motion preferences?

Absolutely. It includes CSS and React-based patterns to detect and respect the 'prefers-reduced-motion' media query for animations and transitions.

What accessibility standard does this skill follow?

This skill specifically adheres to WCAG 2.1 Level AA standards, focusing on making web content accessible to a wider range of people with disabilities.

Does it provide code for focus trapping?

Yes, it includes robust React patterns and hooks for managing focus within modals and dialogs to prevent keyboard users from 'escaping' into the background content.

How does this skill handle ARIA roles?

The skill follows the 'First Rule of ARIA': use native HTML elements first. When native elements aren't sufficient, it provides specific ARIA roles and attributes for states, properties, and live regions.

Web Accessibility Patterns

Name: Web Accessibility Patterns
Author: AlexanderStephenThompson

byAlexanderStephenThompson

デザインツール

Implements WCAG 2.1 AA compliant accessibility patterns and semantic HTML structures for React applications.

概要

The Web Accessibility Skill equips Claude with specialized knowledge to build inclusive web applications following WCAG 2.1 Level AA standards. It prioritizes the POUR principles—Perceivable, Operable, Understandable, and Robust—to ensure React components work seamlessly for all users, including those relying on screen readers or keyboard navigation. By providing standardized implementation patterns for complex UI elements like focus-trapped modals, ARIA live regions, and semantic form structures, this skill helps developers eliminate 'div soup' and accessibility debt during the development process.

主な機能

0 GitHub stars
Advanced focus management including modal focus trapping and skip links
Semantic HTML enforcement for landmarks, headings, and interactive elements
WCAG 2.1 Level AA compliance guidance and POUR principles
Accessibility-first form patterns including error handling and required fields
ARIA implementation patterns for dynamic content and live regions

ユースケース

Refactoring non-semantic legacy code into accessible React components
Ensuring application-wide compliance with color contrast and reduced motion standards
Implementing keyboard-navigable UI components like modals, tabs, and menus

概要

主な機能

0 GitHub stars
Advanced focus management including modal focus trapping and skip links
Semantic HTML enforcement for landmarks, headings, and interactive elements
WCAG 2.1 Level AA compliance guidance and POUR principles
Accessibility-first form patterns including error handling and required fields
ARIA implementation patterns for dynamic content and live regions

ユースケース

Refactoring non-semantic legacy code into accessible React components
Ensuring application-wide compliance with color contrast and reduced motion standards
Implementing keyboard-navigable UI components like modals, tabs, and menus