How does it handle keyboard navigation?

The skill provides specific patterns for focus management, tabindex usage, and ensuring all interactive elements are reachable and operable via keyboard alone.

Does this skill help with WCAG 2.1 compliance?

Yes, it follows W3C WAI principles and WCAG guidelines to ensure web interfaces meet modern accessibility standards for perceivability and operability.

Does it support complex ARIA patterns?

Yes, it includes guidance for custom components like modals, accordions, and live regions, ensuring they use the correct ARIA roles, states, and properties.

Can it help refactor existing code for accessibility?

Absolutely. It can review your existing HTML, CSS, and JavaScript to identify accessibility gaps and provide code snippets for remediation.

Web Accessibility & WCAG Compliance

Name: Web Accessibility & WCAG Compliance
Author: vinnie357

byvinnie357

0•

安全与测试

Implements and reviews web interfaces to ensure they meet W3C WAI and WCAG accessibility standards for inclusive user experiences.

This skill empowers Claude to act as an accessibility expert, guiding the development of inclusive web interfaces following W3C WAI principles (WCAG). It provides actionable patterns for the POUR principles—Perceivable, Operable, Understandable, and Robust—ensuring components are keyboard-friendly, screen-reader compatible, and semantically sound. Whether you are building complex forms, implementing custom ARIA roles, or refactoring legacy code for compliance, this skill ensures your web content is usable for people with disabilities through best-practice implementation and structural audits.

主要功能

01POUR principle implementation (Perceivable, Operable, Understandable, Robust)

020 GitHub stars

03Keyboard navigation patterns and focus management for interactive UI

04Semantic HTML first approach with optimized ARIA role integration

05Accessible form patterns including validation and error handling

06Color contrast standards and visual accessibility guidance

使用场景

01Building complex, keyboard-navigable UI components like modals, tabs, and dropdowns

02Creating accessible forms with proper label association and screen-reader support

03Conducting accessibility audits and refactoring existing frontend code for compliance

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vinnie357/claude-skills accessibility

For use in Claude.ai and ChatGPT

Download Skill