Does this skill support the latest WCAG standards?

Yes, it provides implementation patterns specifically designed for WCAG 2.2 AA compliance, which is the current legal standard for many accessibility requirements.

Can I use this with React applications?

Absolutely, it includes dedicated rules and patterns for Adobe’s React Aria hooks and components to ensure accessible interactive UI.

How does it handle complex focus management?

It provides standardized patterns for focus traps in modals, focus restoration for triggers, and roving tabindex for complex widgets like menus.

Does it help with automated accessibility testing?

Yes, it includes integration patterns for axe-core, Playwright a11y testing, and static analysis to catch accessibility errors before they reach production.

Accessibility & WCAG Compliance

Name: Accessibility & WCAG Compliance
Author: yonatangross

byyonatangross

•

116

•

Design Tools

Implements WCAG 2.2 standards, keyboard focus management, and accessible React Aria patterns for inclusive web development.

This skill empowers developers to build production-ready, inclusive web applications by providing comprehensive patterns for WCAG 2.2 AA compliance. It includes specialized guidance for keyboard focus management, React Aria component implementation, and cognitive accessibility. By leveraging a native HTML-first philosophy and honoring user preferences like reduced motion, it ensures that applications are not only legally compliant but truly usable for all individuals, including those using screen readers or assistive technologies. It features 14 specific rule sets to automate the identification of anti-patterns and the implementation of accessible UI components.

Key Features

01Support for modern user preferences like reduced motion and high contrast

02Static anti-pattern detection to catch accessibility issues during development

03116 GitHub stars

04Advanced keyboard focus management including focus traps and restoration

05Production-ready React Aria hook patterns for accessible UI components

06Comprehensive WCAG 2.2 AA compliance patterns and POUR exit criteria

Use Cases

01Developing WCAG 2.2 AA compliant component libraries with React Aria

02Implementing cognitive inclusion and user preference support for modern web apps

03Auditing and fixing focus management in complex web modals and overlays

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit accessibility

For use in Claude.ai and ChatGPT

Download Skill