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.

主要功能

01Integration patterns for automated testing with axe-core and jest-axe

02Advanced keyboard navigation logic and programmatic focus management

03Accessible form structures with validation and screen reader support

0455 GitHub stars

05Color contrast ratio and luminance calculation for visual accessibility

06WCAG 2.1 compliant ARIA patterns for buttons, modals, and navigation menus

使用场景

01Refactoring existing frontend codebases to improve screen reader compatibility

02Building interactive UI components that meet legal accessibility requirements

03Implementing complex focus trapping and keyboard shortcuts for modal dialogs

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hoodini/ai-agents-skills web-accessibility

For use in Claude.ai and ChatGPT

Download Skill