skills.rest
Yvesdefaria
YvesdefariaCOMMUNITY
Explore all skills by this author →
GitHub

accessibility

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

Updated Aug 3, 2026
Search Tags:#accessibility#a11y#screen reader#keyboard navigation#audit#wcag#aria
One-click install
npx skills add https://github.com/Yvesdefaria/GymLab --skill accessibility-yvesdefaria
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/Yvesdefaria/GymLab/tree/main/.opencode/skills/accessibility
Command: npx skills add https://github.com/Yvesdefaria/GymLab --skill accessibility-yvesdefaria

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 checklist and copy-paste-ready code patterns to find and fix these issues. ## Core Features & Use Cases - WCAG 2.2 Audit Guidance: Covers all four POUR principles with conformance levels A, AA, and AAA, including the nine criteria new in WCAG 2.2 such as target size, dragging movements, and accessible authentication. - Copy-Paste Code Patterns: Reference implementations for modal focus traps, skip links, form labels, error handling, ARIA tabs, live regions, and dragging alternatives. - Testing Workflow: Combines automated tools (Lighthouse, axe-core) with a manual checklist covering keyboard navigation, screen readers, zoom, and reduced motion. - Use Case: Before launching a React app, ask for an accessibility audit of your components to get concrete fixes for missing labels, focus indicators, and contrast violations. ## Quick Start Audit my web page for WCAG 2.2 accessibility issues and suggest fixes for keyboard navigation and screen reader support.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I make my 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 includes 4.5:1 text contrast, keyboard accessibility, visible focus indicators, and 24x24 pixel minimum target sizes.

How to test web accessibility with automated tools?▼

Run Lighthouse with the accessibility category via npx lighthouse, or use axe-core CLI against your URL. Automated tools catch roughly a third of issues, so combine them with manual keyboard navigation and screen reader testing using VoiceOver or NVDA.

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 pixels, consistent help, redundant entry, and accessible authentication at levels A through AAA.

Should I use ARIA roles or native HTML elements?▼

Prefer native HTML elements like button, input, and dialog over ARIA roles on generic divs. Native elements provide built-in keyboard support and semantics. Use ARIA only when no native equivalent exists, such as for tabs or live region announcements.

Why is my color contrast failing accessibility audits?▼

Contrast fails when text-to-background ratios fall below 4.5:1 for normal text or 3:1 for large text at Level AA. UI components and focus indicators also need 3:1 contrast. Verify ratios with a contrast checker and adjust foreground or background colors.

Related Skills

Explore More Software Engineering Skills→
dudqks0319-cpududqks0319-cpu

artifacts_builder

Builds frontend web artifacts with structured HTML, CSS, and JavaScript files.

Community
Basic
petrkindlmannpetrkindlmann
64

accessibility-testing

Automate accessibility testing with axe-core and Playwright for WCAG conformance.

Community
Advanced
hq-opensourcehq-opensource
7

web-quality-audit

Audit website performance, accessibility, and SEO with prioritized recommendations.

Official
Intermediate
MythologIQMythologIQ

wcag-audit-patterns

Audit websites against WCAG 2.2 with automated and manual testing.

Community
Intermediate