← ClaudeAtlas

wcag-accessibilitylisted

Use when building UI components, reviewing color contrast, adding ARIA attributes, handling keyboard navigation, writing alt text, creating forms, or ensuring WCAG 2.2 AA compliance. Covers color contrast ratios, semantic HTML, focus management, screen reader support, motion preferences, and accessibility auditing.
LeahyCC/claude-skills · ★ 3 · Web & Frontend · score 72
Install: claude install-skill LeahyCC/claude-skills
# WCAG 2.2 AA Accessibility Comprehensive accessibility guidance for web applications targeting WCAG 2.2 Level AA conformance. ## Architecture Overview ``` [Component Authoring] ├── Semantic HTML (landmarks, headings, lists) ├── ARIA attributes (roles, states, properties) ├── Keyboard interaction (focus, tab order, shortcuts) └── Visual design (contrast, spacing, motion) ↓ [Automated Testing] ├── axe-core / jest-axe (unit) ├── Lighthouse CI (integration) └── pa11y (page-level) ↓ [Manual Testing] ├── Keyboard-only navigation ├── Screen reader walkthrough (VoiceOver, NVDA) └── Zoom to 200% / reflow check ↓ [Continuous Compliance] ├── CI gate (axe failures block merge) ├── Design token enforcement (contrast-safe palette) └── Periodic audit (quarterly full review) ``` ## Quick Reference | Need to... | See | | ----------------------------------------- | ---------------------------------------------------------------- | | Fix color contrast failures | [Color Contrast](./resources/color-contrast.md) | | Add keyboard support to custom components | [Keyboard Navigation](./resources/keyboard-navigation.md) | | Choose correct ARIA roles and landmarks | [Semantic HTML](./resources/semantic-html.md) | | Build accessible forms with validation