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

0•

Herramientas de Diseño

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.

Características Principales

010 GitHub stars

02Advanced focus management including modal focus trapping and skip links

03Semantic HTML enforcement for landmarks, headings, and interactive elements

04WCAG 2.1 Level AA compliance guidance and POUR principles

05Accessibility-first form patterns including error handling and required fields

06ARIA implementation patterns for dynamic content and live regions

Casos de Uso

01Refactoring non-semantic legacy code into accessible React components

02Ensuring application-wide compliance with color contrast and reduced motion standards

03Implementing keyboard-navigable UI components like modals, tabs, and menus

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add alexanderstephenthompson/claude-hub web-accessibility

For use in Claude.ai and ChatGPT

Download Skill