← ClaudeAtlas

a11ylisted

Accessibility (a11y) for web + mobile per WCAG 2.2 AA. Use when writing or reviewing UI code (React, React Native, Vue, Svelte) — screens, components, forms, modals, toasts, navigation. Covers semantic HTML / RN AccessibilityInfo props, ARIA patterns (use natives first), keyboard navigation, focus management, screen reader testing (VoiceOver / TalkBack / NVDA), color contrast, motion sensitivity, accessible forms with error handling, live regions, automated tooling (axe-core, Lighthouse, Playwright). Pairs with frontend-fundamentals (generic UI patterns).
kouroshez/coding-os · ★ 4 · Web & Frontend · score 76
Install: claude install-skill kouroshez/coding-os
# Accessibility — WCAG 2.2 AA A practical playbook for making UI usable by people with disabilities. WCAG 2.2 (October 2023, current standard) at AA level is the legal compliance bar in most jurisdictions and the right minimum for any app shipping in 2026. ## When to Use This Skill - Writing or reviewing any screen / component / form / modal. - Adding interactive UI (buttons, menus, dropdowns, tabs). - Setting up navigation (skip links, focus trap in modals). - Choosing colors / typography for the design system. - Auditing the app before launch. - Responding to accessibility user feedback / lawsuit risk assessment. For the cross-platform mobile concerns, see `mobile-fundamentals`. For component patterns, see `react-native-patterns` (RN) or `frontend-fundamentals` (web). ## The Four POUR Principles (WCAG) WCAG organizes everything around four principles. Memorize the acronym; it's the lens for every UI decision. 1. **Perceivable** — Users must be able to perceive the content. Text alternatives for images, captions for video, sufficient color contrast, no info conveyed by color alone. 2. **Operable** — Users must be able to operate the UI. Keyboard accessible, enough time, no seizure-inducing flashes, navigable. 3. **Understandable** — Users must be able to understand the content + UI. Readable language, predictable behavior, helpful error messages. 4. **Robust** — Content works with current AND future assistive tech. Semantic markup, valid code, ARIA used correctly. ##