skills.rest
avel123111
avel123111COMMUNITY
Explore all skills by this author →
GitHub

web-quality-accessibility

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

Updated May 26, 2026
Search Tags:#accessibility#a11y#screen reader#keyboard navigation#audit#wcag#aria
One-click install
npx skills add https://github.com/avel123111/triplanio --skill web-quality-accessibility-avel123111
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-quality-accessibility
Source: https://github.com/avel123111/triplanio/tree/main/.claude/skills/web-quality-accessibility
Command: npx skills add https://github.com/avel123111/triplanio --skill web-quality-accessibility-avel123111

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Web interfaces often fail 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 Guidance: Covers all four POUR principles (Perceivable, Operable, Understandable, Robust) with conformance levels A, AA, and AAA, including the new 2.2 criteria like target size, dragging movements, and accessible authentication. - Ready-to-Use Code Patterns: Reference implementations for modal focus traps, skip links, form labels, error handling, ARIA tabs, live regions, and dragging alternatives. - Testing Checklists: Automated testing commands (Lighthouse, axe-core) plus manual checklists for keyboard navigation, screen readers, zoom, and reduced motion. - Use Case: Before launching a React app, run an accessibility audit to catch critical issues like missing form labels, keyboard traps, and insufficient color contrast, then apply the provided patterns to fix them. ## Quick Start Audit this page for WCAG 2.2 accessibility issues and suggest fixes for any keyboard navigation and contrast problems.

Frequently Asked Questions about web-quality-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 automated tools like Lighthouse (npx lighthouse --only-categories=accessibility) or axe-core, then manually test keyboard navigation, screen readers (VoiceOver, NVDA), 200% zoom, and reduced motion. Check issues against the WCAG 2.2 success criteria by level.

How do I make a modal dialog accessible with keyboard focus trapping?▼

Trap Tab and Shift+Tab within the modal's focusable elements, close on Escape, and focus the first element on open. 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 compliance?▼

WCAG AA requires 4.5:1 contrast for normal text, 3:1 for large text (18px+ or 14px+ bold), and 3:1 for UI components and graphics. Level AAA raises text requirements to 7:1 and 4.5:1 respectively.

Should I use ARIA roles or native HTML elements for accessibility?▼

Prefer native elements like <button>, <a href>, and form controls, which provide keyboard activation, focus, and semantics for free. Only add ARIA roles, tabindex, and manual keyboard handlers when a native element cannot be used.

What accessibility issues should be fixed first before launch?▼

Fix critical issues immediately: missing form labels, missing image alt text, insufficient color contrast, keyboard traps, and absent focus indicators. Serious issues like missing page language, heading structure, and skip links should be resolved before launch.

What changed in WCAG 2.2 compared to WCAG 2.1?▼

WCAG 2.2 removed criterion 4.1.1 Parsing and added nine new criteria, including Focus Not Obscured, Dragging Movements, Target Size (24x24px minimum), Consistent Help, Redundant Entry, and Accessible Authentication at levels A through AAA.

Related Skills

Explore More Software Engineering Skills→
IntopiaIntopia
38

intopia-web-accessibility

Build accessible web interfaces and review UI code for WCAG 2.2 issues.

Official
Advanced
Eng-susoEng-suso

wcag-audit-patterns

Audit web content against WCAG 2.2 criteria with automated scans and manual verification checklists.

Community
Intermediate
yahav123147yahav123147

web-quality-audit

Audit web pages for performance, accessibility, SEO, and best practices.

Community
Intermediate
tsuji-tomonoritsuji-tomonori

a11y-ci-gating

Automate accessibility testing in CI/CD pipelines with quality gates.

Community
Advanced