accessibility

Audit and improve web accessibility following WCAG 2.2 guidelines and ARIA patterns.

Updated Mar 12, 2026
One-click install
npx skills add https://github.com/RavitejaKarra24/dotfiles --skill accessibility-ravitejakarra24
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/RavitejaKarra24/dotfiles/tree/main/agents/.agents/skills/accessibility
Command: npx skills add https://github.com/RavitejaKarra24/dotfiles --skill accessibility-ravitejakarra24

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Web interfaces often exclude users with disabilities due to missing alt text, poor keyboard support, low contrast, and incorrect ARIA usage. This Skill provides concrete WCAG 2.2 guidance and copy-paste-ready code patterns to find and fix these issues. ## Core Features & Use Cases - WCAG 2.2 Coverage: Organized by the POUR principles (Perceivable, Operable, Understandable, Robust) with conformance levels A, AA, and AAA, including all criteria new in 2.2 such as target size, dragging movements, and accessible authentication. - Ready-Made Code Patterns: Reference implementations for modal focus traps, skip links, form labels, error handling, ARIA tabs, live regions, and dragging alternatives. - Testing Guidance: Automated audit commands (Lighthouse, axe-core) plus a manual checklist covering keyboard navigation, screen readers, zoom, and reduced motion. - Use Case: Before launching a checkout flow, run an a11y audit to verify form labels, error announcements, focus visibility, and 24x24px touch targets, then apply the provided patterns to fix violations. ## Quick Start Audit this page for WCAG 2.2 accessibility issues and suggest fixes for any violations found.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I make a website WCAG 2.2 compliant?

WCAG 2.2 compliance requires meeting success criteria across four principles: Perceivable, Operable, Understandable, and Robust. Target Level AA, which covers contrast ratios, keyboard access, focus visibility, target size, and error handling, then verify with automated and manual testing.

How to test web accessibility with automated tools?

Run Lighthouse with the accessibility category via npx lighthouse, or use the axe-core CLI against a URL. Automated tools catch issues like missing alt text and contrast failures, but manual keyboard and screen reader testing is still required.

What color contrast ratio is required for WCAG AA?

WCAG AA requires 4.5:1 contrast for normal text and 3:1 for large text (18px or 14px bold and above). UI components and graphical objects need at least 3:1 against adjacent colors, including focus indicators.

Should I use ARIA roles or native HTML elements?

Prefer native HTML elements like button, input, and dialog because they provide keyboard handling, focus, and semantics for free. Only add ARIA roles and states when no native element exists, such as for tabs or custom live regions.

What accessibility features are new in WCAG 2.2?

WCAG 2.2 adds focus not obscured, dragging movements, 24x24px minimum target size, consistent help, redundant entry, and accessible authentication criteria. It also removes the 4.1.1 Parsing criterion from Level A.