What standards does the UX Accessibility skill follow?

The skill is built around the Web Content Accessibility Guidelines (WCAG) 2.1 AA and AAA standards to ensure broad compliance.

Does it support screen reader optimization?

Yes, it emphasizes the use of semantic HTML first and provides specific guidance on using ARIA attributes and live regions where HTML falls short.

Can I use this for color contrast checking?

While it doesn't run a live scanner, it provides the required contrast ratios (e.g., 4.5:1 for normal text) and logic to validate your design choices.

How does this skill handle focus management?

It provides implementation patterns for visible focus indicators, focus trapping within modals, and managing focus shifts during route changes.

UX Accessibility Design

Name: UX Accessibility Design
Author: phananhtuan09

byphananhtuan09

디자인 도구

Implements inclusive design principles and WCAG compliance for interactive web interfaces and components.

소개

The UX Accessibility skill provides Claude with comprehensive guidance for creating inclusive, accessible user interfaces. It focuses on critical areas such as keyboard navigation, focus management, screen reader support through semantic HTML and ARIA, and color contrast validation. By using this skill, developers can ensure their UI components—like modals, forms, and navigation menus—meet WCAG AA/AAA standards, improving the experience for users with disabilities while simultaneously boosting SEO and legal compliance.

주요 기능

Focus trapping logic for modals and dialog components
Dynamic live region management for real-time content updates
WCAG-compliant color contrast validation for UI text and buttons
0 GitHub stars
Keyboard navigation implementation for interactive elements
Semantic HTML and ARIA attribute optimization for screen readers

사용 사례

Optimizing forms with proper labels, error associations, and fieldsets
Building accessible complex UI components like accessible modals and dropdowns
Auditing existing web interfaces for WCAG compliance and keyboard usability

소개

주요 기능

Focus trapping logic for modals and dialog components
Dynamic live region management for real-time content updates
WCAG-compliant color contrast validation for UI text and buttons
0 GitHub stars
Keyboard navigation implementation for interactive elements
Semantic HTML and ARIA attribute optimization for screen readers

사용 사례

Optimizing forms with proper labels, error associations, and fieldsets
Building accessible complex UI components like accessible modals and dropdowns
Auditing existing web interfaces for WCAG compliance and keyboard usability