Is it compatible with modern frontend frameworks?

While the examples often use React and TypeScript, the ARIA roles and accessibility principles provided are applicable to any modern web framework or vanilla JavaScript.

Can it handle complex keyboard navigation?

Absolutely; it features robust logic for focus trapping, tab order management, and keyboard event handling within interactive elements like dialogs and menus.

How does this skill help with WCAG compliance?

It provides standardized ARIA patterns and code implementations that align with WCAG 2.1 guidelines for interaction, perceivability, and robustness.

Does it support automated accessibility testing?

Yes, it includes patterns for integrating axe-core and jest-axe into your development workflow to catch accessibility violations during testing.

Does it assist with visual accessibility and contrast?

Yes, it includes utility functions for calculating color contrast ratios to ensure your UI meets AA and AAA standards for text and component visibility.

Web Accessibility Assistant

Name: Web Accessibility Assistant
Author: hoodini

byhoodini

•

デザインツール

Implements WCAG 2.1 compliant web components and ARIA patterns to ensure inclusive and accessible user experiences.

概要

This skill empowers developers to build highly accessible web applications by providing expert guidance on WCAG 2.1 standards, ARIA design patterns, and keyboard navigation strategies. It enables Claude Code to implement complex UI components like modals and menus with proper roles, manage focus traps for screen readers, calculate color contrast ratios for visual compliance, and integrate automated accessibility testing using tools like axe-core. Ideal for teams prioritizing inclusive design and legal compliance, it ensures that web interfaces are usable by everyone regardless of their assistive technology.

主な機能

Integration patterns for automated testing with axe-core and jest-axe
Advanced keyboard navigation logic and programmatic focus management
Accessible form structures with validation and screen reader support
55 GitHub stars
Color contrast ratio and luminance calculation for visual accessibility
WCAG 2.1 compliant ARIA patterns for buttons, modals, and navigation menus

ユースケース

Refactoring existing frontend codebases to improve screen reader compatibility
Building interactive UI components that meet legal accessibility requirements
Implementing complex focus trapping and keyboard shortcuts for modal dialogs

概要

主な機能

Integration patterns for automated testing with axe-core and jest-axe
Advanced keyboard navigation logic and programmatic focus management
Accessible form structures with validation and screen reader support
55 GitHub stars
Color contrast ratio and luminance calculation for visual accessibility
WCAG 2.1 compliant ARIA patterns for buttons, modals, and navigation menus

ユースケース

Refactoring existing frontend codebases to improve screen reader compatibility
Building interactive UI components that meet legal accessibility requirements
Implementing complex focus trapping and keyboard shortcuts for modal dialogs