accessibility
Installation
Summary
Build WCAG 2.1 AA compliant websites with semantic HTML, ARIA, focus management, and screen reader support.
- Covers five core areas: semantic HTML element selection, ARIA patterns (labels, live regions, roles), keyboard navigation with focus traps, color contrast requirements (4.5:1 text, 3:1 UI), and accessible form design with validation
- Includes 12 documented accessibility issues with prevention strategies, from missing focus indicators to keyboard traps to insufficient contrast
- Provides code patterns for common components: dialogs with focus management, accessible tabs with arrow key navigation, skip links, and validated forms with error announcements
- Testing workflow covers keyboard-only verification, screen reader testing (NVDA/VoiceOver), and automated tools (axe DevTools, Lighthouse)
SKILL.md
Web Accessibility (WCAG 2.1 AA)
Status: Production Ready ✅ Last Updated: 2026-01-14 Dependencies: None (framework-agnostic) Standards: WCAG 2.1 Level AA
Quick Start (5 Minutes)
1. Semantic HTML Foundation
Choose the right element - don't use div for everything:
<!-- ❌ WRONG - divs with onClick -->
<div onclick="submit()">Submit</div>
<div onclick="navigate()">Next page</div>
Related skills
More from jezweb/claude-skills
tailwind-v4-shadcn
|
2.7Ktanstack-query
|
2.5Kshadcn-ui
Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.
2.5Ktailwind-theme-builder
>
2.2Kfastapi
|
2.0Kcolor-palette
>
1.9K