skills.rest
SatohaCC
SatohaCCCOMMUNITY
Explore all skills by this author →
GitHub

wcag-compliance

Implement WCAG 2.2 AA accessibility patterns in web applications.

Updated Aug 27, 2026
Search Tags:#accessibility#a11y#wcag#contrast#keyboard#aria
One-click install
npx skills add https://github.com/SatohaCC/nextjs-mdx-blog --skill wcag-compliance-satohacc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wcag-compliance
Source: https://github.com/SatohaCC/nextjs-mdx-blog/tree/main/.agents/skills/wcag-2-2-accessibility-compliance
Command: npx skills add https://github.com/SatohaCC/nextjs-mdx-blog --skill wcag-compliance-satohacc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, zod, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This guide provides a structured approach to implementing WCAG 2.2 AA accessibility patterns across web applications, enabling teams to audit and achieve compliant interfaces.

Core Features & Use Cases

  • Pattern library: Catalogs WCAG 2.2 AA accessible patterns (semantic HTML, ARIA roles, focus management, keyboard navigation).
  • Auditing & remediation: Provides a checklist-driven audit workflow to identify and fix accessibility gaps.
  • Use Case: Apply to updates of a complex SPA to improve keyboard navigation and contrast compliance.

Quick Start

Run a WCAG 2.2 AA evaluation on your app and begin implementing the recommended accessibility patterns.

Frequently Asked Questions about wcag-compliance

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

FAQPage Schema
How do I audit my web app for WCAG 2.2 AA compliance?▼

Audit web apps for WCAG 2.2 AA compliance using a checklist-driven workflow to evaluate semantic HTML, ARIA roles, contrast, and keyboard navigation to identify accessibility gaps.

How do I implement keyboard navigation and focus management in a React SPA?▼

Implement keyboard navigation and focus management in React SPAs by applying WCAG 2.2 AA patterns for accessible focus handling, ensuring interactive elements remain reachable via keyboard.

What's the best way to add ARIA labeling and accessible messaging?▼

Add ARIA labeling and accessible messaging by implementing status and alert live regions, utilizing ARIA roles to satisfy WCAG 2.2 AA semantic requirements for dynamic content updates.

Do I need React and Zod to use these WCAG accessibility patterns?▼

React and Zod are listed dependencies for applying these WCAG 2.2 AA patterns, indicating the accessibility auditing and remediation workflow is tailored for web applications built within this stack.

How do I fix color contrast issues to meet WCAG 2.2 AA standards?▼

Fix color contrast issues to meet WCAG 2.2 AA standards by applying the cataloged contrast remediation patterns, ensuring visual elements pass the required contrast ratios for inclusive design.

Related Skills

Explore More Software Engineering Skills→
verivendverivend

form-validation

Implement Vue.js form validation with VeeValidate 4 and Zod schemas.

Official
Intermediate
timsvoicetimsvoice

specimin-ui-accessibility

Audit and fix generated UI code for WCAG 2.1 AA compliance.

Community
Advanced
cynthiateeterscynthiateeters

Accessibility validation (WCAG 2.2 Level AA)

Validates WCAG 22 Level AA accessibility compliance of HTML including contrast, ARIA, keyboard navigation, and image alt text before commits.

Community
Basic
89jobrien89jobrien
4

web-accessibility

Audit web content for WCAG 2.1/2.2 conformance and accessibility issues.

Community
Advanced