wcag-audit-patterns

Audit web content against WCAG 2.2 guidelines with checklists and remediation patterns.

3|Updated Apr 20, 2026
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill wcag-audit-patterns-langgenius
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wcag-audit-patterns
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/wcag-audit-patterns
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill wcag-audit-patterns-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Web accessibility violations expose products to legal risk under ADA and Section 508, yet WCAG 2.2 contains dozens of success criteria that are hard to audit systematically. This Skill provides a structured audit workflow with per-criterion checklists, automated testing setup, and concrete code fixes. ## Core Features & Use Cases - Criterion-by-criterion checklists: Covers all four POUR principles (Perceivable, Operable, Understandable, Robust) with Level A and AA checkpoints, including WCAG 2.2 additions like Focus Not Obscured. - Automated testing integration: Provides axe-core, Playwright, pa11y, and Lighthouse configurations to catch the 30-50% of issues detectable by tooling. - Remediation patterns: Supplies before/after HTML, CSS, and JavaScript fixes for common violations such as missing form labels, insufficient color contrast, and keyboard-inaccessible widgets. - Use Case: When preparing a VPAT or responding to an accessibility complaint, run the automated audit, then walk the manual checklist to verify keyboard navigation, focus visibility, and screen reader compatibility, applying the provided remediation snippets for each violation found. ## Quick Start Audit this page for WCAG 2.2 Level AA conformance and list the violations with fixes.

Frequently Asked Questions about wcag-audit-patterns

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

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

Run automated tools like axe-core, pa11y, or Lighthouse to catch detectable violations, then manually verify the checklist items for each POUR principle. Automated testing covers only 30-50% of issues, so keyboard navigation and screen reader checks are required.

What is the difference between WCAG Level A, AA, and AAA?

Level A is the minimum accessibility baseline, Level AA is the standard most regulations like ADA and Section 508 require, and Level AAA provides enhanced accessibility for specialized needs. Most audits target Level AA conformance.

How do I fix insufficient color contrast violations?

Adjust text colors to reach a 4.5:1 contrast ratio for normal text and 3:1 for large text or UI components. Verify values with tools like the WebAIM Contrast Checker or axe DevTools before shipping the fix.

Can automated accessibility testing replace manual testing?

No. Automated tools detect only 30-50% of accessibility issues. Manual testing is required for keyboard operability, focus order, meaningful link text, and correct screen reader announcements of dynamic content.

How do I make a custom dropdown keyboard accessible?

Add tabindex="0", an appropriate ARIA role such as combobox, and keydown handlers for Enter, Space, Escape, and arrow keys. Manage aria-expanded state and ensure focus moves logically when the widget opens and closes.