Accessibility Audit

1---
2name: accessibility-audit
3description: >
4  Audit and improve WCAG 2.2 AA accessibility in Next.js apps. Use this skill for
5  semantic HTML, ARIA, keyboard access, screen readers, forms, focus, contrast,
6  automated tests, and compliance checks.
7---
8
9# Accessibility Audit
10
11> WCAG 2.2 compliance audit and implementation for Next.js applications
12
13## Metadata
14
15- **Name**: accessibility-audit
16- **Version**: 1.0.0
17- **Author**: webrenew
18- **Tags**: nextjs, accessibility, a11y, wcag, aria, screen-reader, keyboard, compliance
19
20## When to Use
21
22This skill should be used when:
23- Auditing a Next.js application for WCAG 2.2 AA compliance
24- Implementing accessible components (dialogs, tabs, forms, navigation)
25- Setting up automated accessibility testing (axe-core, Playwright, eslint-plugin-jsx-a11y)
26- Fixing keyboard navigation, focus management, or screen reader issues
27- Preparing for enterprise compliance (ADA, Section 508, EN 301 549, VPAT)
28- Reviewing component library usage (shadcn/ui, Radix) for accessibility correctness
29- Handling dynamic content announcements, route changes, or live regions
30
31## Summary
32
33Systematic WCAG 2.2 AA accessibility audit and implementation guide for Next.js. Covers semantic HTML, ARIA patterns, keyboard navigation, focus management, color contrast, accessible forms, images and media, dynamic content and route change announcements, React/Next.js specific patterns (useId, Link, Image), testing tools and workflows (axe-core, Playwright, VoiceOver/NVDA), shadcn/ui and Radix accessibility, legal compliance (ADA, Section 508, VPAT), and step-by-step audit checklists.