a11y

Name: a11y
Availability: InStock
Author: Dayopt

Apply ARIA labeling and semantic markup to React UI components.

Updated Jun 23, 2025

Search Tags:#accessibility #a11y #wcag #focus #keyboard #shadcn-ui #aria

Ready to run

npx skills add https://github.com/Dayopt/app --skill a11y-dayopt

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: a11y
Source: https://github.com/Dayopt/app/tree/main/.claude/skills/a11y
Command: npx skills add https://github.com/Dayopt/app --skill a11y-dayopt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams implement accessible interactive UI elements by providing guidelines and checks that align with WCAG 2.1 AA and Radix/shadcn UI accessibility patterns.

Core Features & Use Cases

Guidance for ARIA attributes and semantic markup to ensure proper labeling and roles across components.
Keyboard navigation and focus management patterns for modal, dialog, and drawer components, ensuring screen reader compatibility.
WCAG 2.1 AA compliance checks and accessibility recommendations for common interactive elements used in React apps.

Quick Start

Audit your next interactive component by applying a11y guidelines to ensure ARIA labeling, keyboard navigation, and proper focus management.

Frequently Asked Questions about a11y

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add proper ARIA attributes and semantic markup to React components?▼

To add proper ARIA attributes and semantic markup, apply accessibility guidelines during development of buttons, inputs, and dialogs. This ensures correct roles and labeling across custom interactive components using shadcn/ui and Radix UI patterns.

What's the best way to manage keyboard navigation and focus for modal dialogs?▼

Managing keyboard navigation and focus for modal dialogs requires applying specific focus management patterns. This ensures screen reader compatibility and proper focus trapping when interacting with modal, dialog, and drawer components in React applications.

Does this accessibility approach work with shadcn/ui and Radix UI components?▼

Yes, this accessibility approach works directly with shadcn/ui and Radix UI components. It provides guidelines and checks that align with their built-in accessibility patterns to ensure WCAG 2.1 AA compliance across your interactive UI elements.

How do I check if my interactive UI elements meet WCAG 2.1 AA requirements?▼

Checking if interactive UI elements meet WCAG 2.1 AA requirements involves auditing components against accessibility guidelines. This validates ARIA labeling, keyboard navigation, and focus management to deliver compliant user experiences.

Why does my custom button component fail screen reader accessibility checks?▼

Custom button components fail screen reader accessibility checks when missing proper ARIA labeling and semantic markup. Applying accessibility guidelines ensures correct roles and labels, satisfying screen reader compatibility and WCAG 2.1 AA requirements.

When do I need to apply accessibility guidelines during component development?▼

You need to apply accessibility guidelines during the development of interactive UI elements like buttons, inputs, and dialogs. Applying checks early ensures ARIA, keyboard, and focus management requirements are met before deployment.