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
Decision gist · record as of 2026-07-17
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.
Use it when
- accessibility-a11y emphasizes that screen reader testing and keyboard navigation are core pillars of accessible design.
- accessibility-a11y shows you how to embed automated testing tools like Jest and Axe into your development workflow so accessibility checks.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
travisjneuman/.claude/accessibility-a11y · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
skills/accessibility-a11y/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build or audit web interfaces for WCAG 2.2 compliance and assistive technology support”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill equips you to systematically evaluate web applications for accessibility compliance, pinpointing WCAG 2.1 violations and usability barriers that affect users with disabilities. It provides structured auditing capabilities to assess color contrast, keyboard navigation, semantic markup, and assistive technology compatibility, helping teams build more inclusive digital experiences.
This skill equips developers with the knowledge and techniques needed to design and build web applications that meet WCAG 2.1 AA accessibility standards. Learn how to identify barriers, implement inclusive patterns, and verify compliance across your projects. Gain hands-on experience making digital experiences usable for everyone.
This skill helps you systematically test websites and applications against WCAG accessibility standards, pinpointing areas where your digital properties fall short of inclusive design principles. By running structured audits, you can identify compliance gaps and prioritize remediation efforts to ensure your content reaches all users effectively.
This skill equips you to construct inclusive web forms using React and Next.js, emphasizing semantic HTML structure and proper ARIA attributes. Learn to implement accessible error messaging, validation feedback, and label associations that meet WCAG standards and improve user experience across assistive technologies.
This skill provides structured guidance for evaluating web applications against established accessibility standards and WCAG compliance frameworks. Use it to systematically identify barriers, test interactive components, and document findings that help ensure your digital products are usable by everyone.
Master accessible form design by implementing WCAG 2.2 AA standards, semantic HTML, and ARIA attributes that work across assistive technologies. Learn keyboard navigation patterns, error handling, and validation techniques that ensure your forms remain usable for everyone, regardless of ability or device.
More skills accessibility-patterns (Apache-2.0) · a11y-playwright-testing (MIT) · Web Accessibility (unlicensed) · Accessibility Expert (unlicensed) · accessibility-selenium-testing (MIT) · dialogue-manager (MIT)