Can it help with custom UI components?

Absolutely. It provides required ARIA attributes and roles for complex components like tabs, accordions, and custom dropdowns that don't have native HTML equivalents.

Does it support React-specific accessibility patterns?

Yes, it includes specialized patterns for React hooks like useRef and useEffect to manage focus during component lifecycles and route changes.

How does this skill improve web accessibility?

It provides standardized templates and logic for semantic HTML, focus trapping, and ARIA attributes to ensure sites are screen-reader and keyboard-friendly.

Which WCAG standards does this skill follow?

The skill focuses on core WCAG patterns for interactive elements, document structure, and keyboard navigation requirements.

Web Accessibility Assistant

Name: Web Accessibility Assistant
Author: surfertas

bysurfertas

0•

디자인 도구

Implements WCAG-compliant accessibility patterns including semantic HTML, ARIA attributes, and focus management for web applications.

The Accessibility skill provides standardized guidance for building inclusive web applications that meet WCAG requirements. It assists developers in replacing non-semantic code with accessible HTML elements, managing complex focus transitions for modals and route changes, and implementing proper ARIA roles for custom UI components. By following these patterns, developers can ensure their applications are fully navigable via keyboard and optimized for screen readers, reducing compliance risks and improving the user experience for everyone.

주요 기능

01ARIA role and attribute implementation for custom interactive components

020 GitHub stars

03Keyboard navigation enforcement for accordions, tabs, and dropdowns

04Screen reader optimization for dynamic content and loading states

05Semantic HTML mapping for common UI elements and navigation

06Advanced focus management patterns for modals and single-page apps

사용 사례

01Implementing focus trapping and restoration for complex modal dialogs

02Refactoring div-based buttons and navigation into semantic, accessible elements

03Adding ARIA live regions to toast notifications and status updates

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add surfertas/claude-react-rtk accessibility

For use in Claude.ai and ChatGPT

Download Skill