Codify UI development guidelines for accessible components with ARIA and semantic HTML.
npx skills add https://github.com/juchanhwang/missionary --skill client-a11y
Please help me install this Agent Skill. Skill: client-a11y Source: https://github.com/juchanhwang/missionary/tree/main/.claude/skills/client-a11y Command: npx skills add https://github.com/juchanhwang/missionary --skill client-a11y
Provides guidelines for web accessibility coding, covering the three-screen-reader elements (roles, labels, states) and four principles (structure, meaning, predictability, and visual information augmentation) to help build accessible UI. It includes practices for UI component creation and review, ARIA attributes, keyboard accessibility, and semantic HTML usage.
Audit a sample UI to identify interactive elements and apply the accessibility guidelines immediately.
High-intent search queries and answers about installing and using this skill.
To audit web accessibility, review interactive UI components to ensure they have proper screen reader roles, labels, states, and ARIA attributes. This process enforces semantic HTML structure and keyboard navigation to guarantee inclusive interactions.
Accessible UI components rely on four core principles: structure, meaning, predictability, and visual information augmentation. These principles govern the application of semantic HTML, ARIA attributes, and keyboard accessibility to ensure inclusive user experiences.
Add ARIA attributes for keyboard accessibility when native semantic HTML does not convey the required roles, labels, or states. Use ARIA to augment visual information and ensure interactive elements are predictable and navigable for screen reader users.
Yes, these web accessibility guidelines cover semantic HTML usage and screen reader states. They define a mental model for applying roles, labels, and states, providing concrete rules for structuring components and implementing accessibility review workflows.
The best way to implement keyboard navigation is by using semantic HTML elements combined with appropriate ARIA attributes. This ensures interactive controls maintain proper roles and states, enabling predictable keyboard accessibility and screen reader compatibility.
videojsAudit React UI components for ARIA accessibility and keyboard navigation.
SAPAudit UI components for WCAG AA accessibility compliance.
Tristan578Implement WCAG 2.1-compliant web interfaces with semantic HTML and ARIA.
Higashi-KotaAudits UI components for WCAG 2.2 AA and ARIA compliance.
