Agent skill · design visual · travisjneuman
accessibility-a11y
WCAG 2.2 compliance, ARIA patterns, keyboard navigation, screen readers, automated testing
Why this skill is useful
Provides specific ARIA patterns and implementation examples for accessible UI components that the AI wouldn't reliably generate on its own.
What it needs
About 8k tokens when loaded. Last updated 2026-07-17. 87 stars on the source repository.
What this skill does
Accessibility (a11y) Overview This skill covers building accessible web applications that work for everyone, including people using screen readers, keyboard-only navigation, switch devices, and other assistive technologies. It addresses WCAG 2.2 compliance at AA and AAA levels, correct ARIA usage, focus management, color contrast, reduced motion support, and automated testing integration. Use this skill when building new UI components, reviewing existing interfaces for accessibility compliance, fixing a11y audit findings, or integrating automated accessibility testing into CI/CD pipelines. --- Core Principles 1. Semantic HTML first - Native HTML elements (<button>, <nav>, <dialog>) provide accessibility for free. ARIA is a repair tool for when semantics are insufficient, not a replacement for proper HTML. 2. Keyboard is the baseline - If it doesn't work with a keyboard alone, it doesn't work. Every interactive element must be focusable, operable, and have visible focus indicators. 3. Test with real assistive technology - Automated tools catch ~30% of accessibility issues. The rest require manual testing with screen readers (VoiceOver, NVDA) and keyboard-only navigation. 4. Progressive enhancement - Build the accessible version first, then layer on visual enhancements. Never hide content from assistive technology that sighted users can see. 5. No information by color alone - Color can reinforce meaning but never be the sole indicator. Use icons, text labels, and patterns alongside color. --- Key Patterns Pattern 1: Accessible Modal Dialog When to use: Any overlay that requires user interaction before returning to the main content. Implementation: Why: The native <dialog> element with showModal() provides focus trapping, Escape key handling, and proper role="dialog" semantics automatically. Custom modal implementations almost always have focus trap bugs. Using the native element gives you correct behavior for free. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills travisjneuman/accessibility-a11y