accessibility

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

28|1|Updated Mar 15, 2026
One-click install
npx skills add https://github.com/NauelG/astro-blocks --skill accessibility-nauelg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/NauelG/astro-blocks/tree/main/.agents/skills/accessibility
Command: npx skills add https://github.com/NauelG/astro-blocks --skill accessibility-nauelg

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 a structured WCAG 2.2 audit framework with copy-paste-ready code patterns to find and fix accessibility issues. ## Core Features & Use Cases - WCAG 2.2 Audit Framework: 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 testing commands (Lighthouse, axe-core) plus a manual checklist covering keyboard navigation, screen readers, zoom, and reduced motion. - Use Case: Before launching a site, ask for an accessibility audit of your pages; the Skill walks through contrast ratios, focus visibility, form labeling, and screen reader announcements, then provides corrected HTML/CSS/JS for each violation. ## Quick Start Audit this page's HTML for WCAG 2.2 AA compliance and fix any accessibility violations you find.

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?▼

Audit against the four POUR principles: perceivable, operable, understandable, and robust. Fix critical issues first—missing form labels, missing alt text, insufficient contrast, keyboard traps, and invisible focus indicators—then verify with automated tools like axe and Lighthouse plus manual keyboard and screen reader testing.

How do I test web accessibility with automated tools?▼

Run Lighthouse with the accessibility category via npx lighthouse, or use the axe-core CLI against your URL. Automated tools catch roughly a third of issues, so follow up with manual checks: keyboard-only navigation, screen reader testing with VoiceOver or NVDA, and 200% zoom verification.

What is the minimum color contrast ratio 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 3:1 against adjacent colors. AAA raises these to 7:1 and 4.5:1 respectively.

What changed in WCAG 2.2 compared to 2.1?▼

WCAG 2.2 removed criterion 4.1.1 Parsing and added nine new criteria, including Focus Not Obscured, Dragging Movements, Target Size minimum of 24x24 CSS pixels, Consistent Help, Redundant Entry, and Accessible Authentication at both AA and AAA levels.

When should I use ARIA instead of native HTML elements?▼

Prefer native elements like button, input, and dialog whenever possible since they include built-in keyboard support and semantics. Use ARIA roles and states only when no native equivalent exists, such as custom tablists or live region announcements.