wcag-audit-patterns

Audit web interfaces against WCAG criteria and produce prioritized accessibility findings.

Updated Apr 4, 2026
One-click install
npx skills add https://github.com/SleyiW/iWana-neXt --skill wcag-audit-patterns-sleyiw
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wcag-audit-patterns
Source: https://github.com/SleyiW/iWana-neXt/tree/main/.agents/skills/wcag-audit-patterns
Command: npx skills add https://github.com/SleyiW/iWana-neXt --skill wcag-audit-patterns-sleyiw

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Accessibility audits often produce generic compliance lists disconnected from the real frontend. This Skill audits actual screens, components, and user flows against WCAG criteria, combining automated scans with manual keyboard and focus testing to deliver actionable, prioritized findings. ## Core Features & Use Cases - Structured WCAG Audit Workflow: Combines automated tooling (axe, Lighthouse, pa11y) with mandatory manual checks for keyboard navigation, focus visibility, accessible names, and dynamic state announcements. - Prioritized, Actionable Findings: Each finding records severity, affected screen or component, user impact, suggested fix, and verification steps, prioritized by task blockage and cross-component impact. - Remediation Patterns: Includes a reference playbook with WCAG 2.2 checklists, code-level fixes for form labels, color contrast, keyboard navigation, and ARIA status messages. - Use Case: Audit a Next.js checkout flow for accessibility before release, producing a report of blocking issues (missing form labels, keyboard traps in dialogs) with concrete remediation steps for each reusable component. ## Quick Start Audit the login and checkout flows of this project for WCAG 2.2 AA issues and produce a prioritized findings report 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 web page for WCAG accessibility compliance?

Run automated tools like axe-core, pa11y, or Lighthouse for an initial sweep, then manually verify keyboard navigation, focus visibility, accessible names on interactive elements, and form error feedback. Document each finding with severity, location, user impact, and a concrete fix.

What tools detect WCAG violations automatically?

axe-core integrates with Playwright or runs via CLI, pa11y works from the command line, and Lighthouse includes an accessibility category. Automated tools catch roughly 30-50% of issues, so manual testing of focus order and keyboard traps remains required.

Can automated accessibility testing replace manual testing?

No. Automated scans detect missing labels, contrast failures, and semantic errors, but cannot judge focus order logic, keyboard trap behavior, or whether dynamic state changes are announced to screen readers. Manual verification is mandatory for a complete audit.

How do I fix missing form labels for accessibility?

Associate a visible label element with the input using the for and id attributes, or add aria-label or aria-labelledby when a visible label is not possible. Placeholder text alone is not a valid accessible name.

What are the limitations of relying on Lighthouse accessibility scores?

A high Lighthouse score only reflects automated checks and does not prove WCAG conformance. It misses keyboard traps, focus management in modals, live region behavior, and context-dependent issues like unclear link text, all of which require manual review.