frontend-accessibility-validator_skill

Overview

This skill validates web application accessibility against WCAG 2.2 (A/AA/AAA) using automated tools and targeted manual checks. It combines axe-core/Pa11y/Lighthouse scans with keyboard, screen reader, ARIA, semantic HTML, and color-contrast inspections to produce actionable audit reports. The output is a prioritized remediation plan, compliance matrix, and test evidence for CI/CD integration or manual remediation.

How this skill works

Provide one or more URLs or HTML files and a target WCAG level (default: AA). The skill runs automated scans (axe-core by default, optional Pa11y/Lighthouse), verifies HTTP responses, computes timestamp anchoring in America/New_York, and performs guided manual checks for keyboard navigation, focus management, screen reader behavior, ARIA use, and color contrast. Results are aggregated into violations by WCAG success criterion, severity, remediation steps, and a remediation roadmap for immediate prioritization.

When to use it

• You must validate WCAG 2.2 compliance for legal or procurement requirements (ADA, Section 508, EN 301 549).
• You are auditing or remediating accessible components (forms, modals, carousels, tables).
• You want automated accessibility testing in CI/CD pipelines with actionable reports.
• You need to verify color contrast, focus visibility, and touch target sizing for mobile accessibility.
• You require combined automated and manual validation for the nine new WCAG 2.2 success criteria (focus, target size, accessible authentication, redundant entry).

Best practices

• Default to WCAG 2.2 Level AA unless a stricter level is required; document any Level AAA goals separately.
• Use axe-core as the primary automated engine and supplement with Pa11y/Lighthouse for broader coverage and scoring.
• Run automated scans on critical pages first (homepage, checkout, key forms) then expand to templates and content types.
• Always pair automated findings with manual keyboard and screen reader checks—automated tools detect ~57% of issues at best.
• Integrate automated checks into CI/CD with blocking thresholds and schedule periodic manual audits for assistive technology compatibility.

Example use cases

• Quick automated scan of a checkout page to list critical Level A violations and remediation steps (T1).
• Comprehensive multi-page WCAG 2.2 audit combining axe-core, Pa11y, Lighthouse, manual keyboard and screen reader testing (T2).
• Enterprise audit mapping all success criteria to page templates, CI/CD integration, and a phased remediation roadmap (T3).
• Color contrast sweep for a design system to enforce 4.5:1 (AA) or 7:1 (AAA) ratios and focus indicator contrast requirements.
• Verification of accessible authentication and target sizing changes to satisfy new WCAG 2.2 criteria (e.g., Accessible Authentication, Target Size).