accessibility

Audit and fix web accessibility issues following WCAG 2.2 guidelines.

Updated Sep 8, 2026
One-click install
npx skills add https://github.com/pedropenha/project-skills --skill accessibility-pedropenha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/pedropenha/project-skills/tree/main/.agents/skills/accessibility
Command: npx skills add https://github.com/pedropenha/project-skills --skill accessibility-pedropenha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Web interfaces often exclude users with disabilities through missing alt text, poor contrast, keyboard traps, or broken screen reader support. This Skill provides a structured WCAG 2.2 audit workflow and copy-paste-ready fixes so you can find and resolve accessibility barriers systematically. ## Core Features & Use Cases - Evidence-led audits: Run Lighthouse or axe accessibility audits, inspect the rendered accessibility tree, and localize failures to specific components instead of guessing. - WCAG 2.2 coverage: Guidance organized by the POUR principles, including the new 2.2 criteria such as target size, dragging movements, focus not obscured, and accessible authentication. - Ready-made patterns: Reference files include modal focus traps, skip links, ARIA tabs, live regions, form labels, and error handling markup. - Use Case: Before launching a checkout page, run an audit, discover that icon buttons lack accessible names and focus indicators are removed, then apply the provided patterns to fix both issues and re-verify. ## Quick Start Audit this page for WCAG 2.2 accessibility issues and fix the failing components.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I audit a website for WCAG 2.2 accessibility compliance?▼

Run a Lighthouse accessibility audit or axe scan to get failing nodes, then inspect the rendered accessibility tree for names, roles, and landmarks. Exercise the affected flow with a keyboard, fix the source, and re-run the same audit to confirm.

How do I make a modal dialog keyboard accessible?▼

Trap focus inside the modal by cycling Tab and Shift+Tab through its focusable elements and closing on Escape. The native HTML dialog element handles focus trapping automatically and is preferred when browser support allows.

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.

Does a Lighthouse accessibility score of 100 mean WCAG conformance?▼

No. Automated tools detect only a subset of accessibility barriers, so a score of 100 is not WCAG conformance. Manual checks like keyboard navigation, screen reader testing, and zoom verification are still required.

What accessibility requirements are new in WCAG 2.2?▼

WCAG 2.2 adds criteria including Focus Not Obscured, Dragging Movements, Target Size minimum of 24 by 24 CSS pixels, Consistent Help, Redundant Entry, and Accessible Authentication. It also removes criterion 4.1.1 Parsing.