skills.rest
truongnat
truongnatCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

accessibility-compliance

Implement WCAG 2.2 compliant interfaces with ARIA patterns and screen reader support.

Updated Jul 28, 2026
Search Tags:#inclusive design#accessibility#a11y#screen reader#keyboard navigation#wcag#aria
One-click install
npx skills add https://github.com/truongnat/Restly --skill accessibility-compliance-truongnat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-compliance
Source: https://github.com/truongnat/Restly/tree/main/.agents/skills/accessibility-compliance
Command: npx skills add https://github.com/truongnat/Restly --skill accessibility-compliance-truongnat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building interfaces that work for users with disabilities requires deep knowledge of WCAG 2.2 criteria, ARIA roles, keyboard navigation, and mobile screen readers, which most developers lack and often get wrong. ## Core Features & Use Cases - WCAG 2.2 Compliance Guidance: Checklists and code patterns for Level A, AA, and AAA success criteria including contrast ratios, target sizes, and focus visibility. - ARIA Pattern Implementations: Ready-to-use React implementations of accordions, tabs, comboboxes, dialogs, toolbars, and live regions with correct roles, states, and keyboard handling. - Mobile Accessibility: VoiceOver, TalkBack, React Native, SwiftUI, and Jetpack Compose patterns covering touch targets, dynamic type, and gesture alternatives. - Use Case: When building a modal dialog in React, use this Skill to add focus trapping, Escape key handling, aria-modal attributes, and focus restoration so screen reader and keyboard users can operate it correctly. ## Quick Start Audit my React form component for WCAG 2.2 AA compliance and fix any accessibility violations.

Frequently Asked Questions about accessibility-compliance

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

FAQPage Schema
How do I make a React modal dialog accessible?▼

Use role="dialog" with aria-modal="true", label it via aria-labelledby, trap focus inside while open, close on Escape, and restore focus to the triggering element on close. The Skill provides a complete AccessibleDialog implementation with these behaviors.

What are the WCAG 2.2 contrast ratio requirements?▼

Normal text requires 4.5:1 at Level AA and 7:1 at AAA. Large text (18pt+ or 14pt bold) requires 3:1 at AA. UI components and focus indicators need at least 3:1 contrast against adjacent colors.

When should I use ARIA attributes versus semantic HTML?▼

Prefer native HTML elements like button, nav, and main over ARIA roles whenever possible, since they carry built-in keyboard behavior and semantics. Use ARIA only for custom widgets like tabs, comboboxes, or sliders that lack native equivalents.

Does WCAG 2.2 require minimum touch target sizes?▼

Yes, criterion 2.5.8 requires interactive targets of at least 24x24 CSS pixels at Level AA. Apple HIG and Material Design recommend 44x44 or 48x48dp for comfortable touch interaction.

How do I announce dynamic content changes to screen readers?▼

Use live regions: role="status" with aria-live="polite" for non-urgent updates like result counts, and role="alert" with aria-live="assertive" for errors. Clear and reset the message text to ensure repeated announcements are spoken.

Why is my custom button not keyboard accessible?▼

A div with an onClick handler receives no keyboard focus or key handling by default. Either add role="button", tabIndex={0}, and Enter/Space key handlers, or replace it with a native button element which provides all of this automatically.

Related Skills

Explore More Software Engineering Skills→
WesleySmitsWesleySmits
6

auditing-accessibility-wcag

Detects WCAG 2.1 accessibility violations in UI components and pages.

Community
Intermediate
AI-Foundry-CoreAI-Foundry-Core
4

screen-reader-testing

Guide manual web accessibility testing with screen readers like VoiceOver and NVDA.

Official
Advanced
kanopikanopi
16

responsive-styling

Generate mobile-first CSS/SCSS with WCAG AA accessibility and breakpoints.

Official
Advanced
AmidVoshakulAmidVoshakul

radix-ui-design-system

Build accessible design systems with Radix UI headless primitives.

Community
Advanced