accessibility-a11y
This skill equips you to evaluate and improve digital experiences for users with disabilities, ensuring your interfaces meet modern accessibility standards. Leverage WCAG 2.2 guidelines and assistive technology best practices to create inclusive web applications that work for everyone.
accessibility-a11y helps you build interfaces that meet WCAG 2.2 compliance by guiding you through semantic HTML structure, ARIA labeling, keyboard navigation, and color contrast requirements. The skill covers both foundational principles—like proper heading hierarchy and form field associations—and advanced patterns such as live regions for dynamic content and focus management for complex interactive components. You'll learn to evaluate your site systematically and implement fixes that ensure users with disabilities can navigate and interact with your content effectively.
AI-generated summary based on this skill's SKILL.md
Install
travisjneuman/.claude/accessibility-a11y · repository language: JavaScript
git clone https://github.com/travisjneuman/.claude
cp -r .claude/skills/accessibility-a11y ~/.claude/skills/accessibility-a11yFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I make a website accessible to WCAG 2.2 standards?
accessibility-a11y helps you build interfaces that meet WCAG 2.2 compliance by guiding you through semantic HTML structure, ARIA labeling, keyboard navigation, and color contrast requirements. The skill covers both foundational principles—like proper heading hierarchy and form field associations—and advanced patterns such as live regions for dynamic content and focus management for complex interactive components. You'll learn to evaluate your site systematically and implement fixes that ensure users with disabilities can navigate and interact with your content effectively.
What role does screen reader testing and keyboard navigation play in accessibility-a11y?
accessibility-a11y emphasizes that screen reader testing and keyboard navigation are core pillars of accessible design. The skill teaches you to test with assistive technologies like NVDA and VoiceOver to verify that your content is properly announced, and to implement full keyboard-only navigation so users who cannot use a mouse can access all interactive features. You'll learn focus management techniques, ARIA patterns for custom widgets, and how to structure forms with error messages that screen readers can announce clearly.
How can I integrate automated accessibility testing into my CI/CD pipeline?
accessibility-a11y shows you how to embed automated testing tools like Jest and Axe into your development workflow so accessibility checks run continuously. By integrating these tools into your CI/CD pipeline, you catch violations early—before they reach production—and maintain compliance as your codebase evolves. The skill guides you through setting up test configurations, interpreting results, and combining automated checks with manual testing to ensure comprehensive coverage of accessibility requirements.
What are the best practices for implementing accessible form fields with error messages?
accessibility-a11y teaches you to associate form labels with inputs using semantic HTML, implement ARIA labels and descriptions for complex fields, and announce validation errors in ways that screen readers can communicate to users. The skill covers techniques like using aria-invalid, aria-describedby, and live regions to ensure error messages are announced dynamically when validation fails, making it clear to all users—especially those relying on assistive technology—what went wrong and how to correct it.
How do I implement an accessible modal dialog or dropdown menu in React?
accessibility-a11y provides patterns for building accessible modal dialogs and dropdown menus that work across frameworks like React. For modals, you'll learn to manage focus (trapping it within the dialog), handle keyboard events (like Escape to close), and use ARIA attributes like role="dialog" and aria-labelledby. For dropdowns, the skill covers keyboard interactions (arrow keys, Enter, Escape), focus management, and ARIA patterns that ensure screen reader users understand the component's state and can navigate options efficiently.
What does accessibility-a11y teach about semantic HTML and ARIA patterns for custom widgets?
accessibility-a11y emphasizes that semantic HTML is the foundation of accessibility—using native elements like <button>, <nav>, and <main> provides built-in keyboard support and screen reader compatibility. When you must build custom widgets, the skill teaches ARIA patterns that layer semantic meaning on top of generic elements, including roles, states, and properties that assistive technologies need. You'll learn when to use ARIA (when no semantic HTML element exists) and how to combine it with proper focus management, keyboard event handling, and live regions to create inclusive custom components.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
- 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. - 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.
- **Test with real assistive
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/accessibility-a11y/SKILL.md