Audit Web Content for WCAG Compliance

Defines the three WCAG conformance levels - A as the legal-baseline minimum, AA as the standard most regulations require, AAA as enhanced accessibility for specialized needs - and the four POUR principles: Perceivable, Operable, Understandable, and Robust. Ranks common violations by impact: critical blockers (missing alt text on functional images, no keyboard access, missing form labels, auto-playing media without controls), serious (insufficient color contrast, missing skip links, inaccessible custom widgets, missing page titles), and moderate (missing language attribute, unclear link text, missing landmarks, improper heading hierarchy). Walks a full Level A and AA success-criteria checklist organized by the four principles - Perceivable (text alternatives, time-based media captions and audio description, adaptable content structure, distinguishable color and contrast including the 1.4.3 minimum-contrast and 1.4.11 non-text-contrast criteria), Operable (keyboard access with no traps, adjustable timing, seizure-safe flashing limits, navigable bypass blocks and focus order, plus the WCAG 2.2 addition 2.4.11 Focus Not Obscured), Understandable (page and part language, predictable focus and input behavior, consistent navigation and identification, input-assistance error identification and suggestion), and Robust (valid markup, correct name, role, and value for assistive tech, and status-message announcements) - each tagged with its criterion number and level. Covers automated testing with axe-core (a runAccessibilityAudit helper running axe.run scoped to WCAG 2.0/2.1/2.2 AA tags inside a Playwright test asserting zero violations) plus CLI tools including the axe-core CLI, pa11y, and Lighthouse's accessibility category. Ships three remediation patterns with before and after code: missing form labels (three fix options - a visible label, aria-label, or aria-labelledby), insufficient color contrast (adjusting a text color from a 2.5:1 to a 4.5:1 ratio or adding a background), and keyboard navigation (a custom AccessibleDropdown element with tabindex, a combobox role, aria-expanded, and Enter, Space, Escape, and Arrow key handling).

Use it when auditing a page against WCAG success criteria, running automated accessibility tests, or fixing violations like missing labels, low contrast, or keyboard-inaccessible widgets. Skip it for anything unrelated to WCAG accessibility auditing or outside this scope.

Input is a page or component to audit against WCAG A and AA criteria; output is a violations list ranked by impact, an automated axe-core test result, or the matching before and after remediation code for a specific violation type.

axe-core for automated scanning, both browser-embedded and CLI, pa11y and Lighthouse as alternative CLI scanners, and Playwright for asserting zero violations in a test suite.

Frontend engineers and accessibility auditors checking a page against WCAG A and AA success criteria who need the full checklist with criterion numbers, automated test setup, and concrete before and after fixes rather than a general accessibility overview.