Accessibility Audit
WCAG 2.2 compliance audit and implementation for Next.js applications
Metadata
- Name: accessibility-audit
- Version: 1.0.0
- Author: webrenew
- Tags: nextjs, accessibility, a11y, wcag, aria, screen-reader, keyboard, compliance
When to Use
This skill should be used when:
- Auditing a Next.js application for WCAG 2.2 AA compliance
- Implementing accessible components (dialogs, tabs, forms, navigation)
- Setting up automated accessibility testing (axe-core, Playwright, eslint-plugin-jsx-a11y)
- Fixing keyboard navigation, focus management, or screen reader issues
- Preparing for enterprise compliance (ADA, Section 508, EN 301 549, VPAT)
- Reviewing component library usage (shadcn/ui, Radix) for accessibility correctness
- Handling dynamic content announcements, route changes, or live regions
Summary
Systematic 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.
1---2name: accessibility-audit3description: Audit and improve WCAG 2.2 AA accessibility in Next.js apps. Use this skill for semantic HTML, ARIA, keyboard access, screen readers, forms, focus, contrast, automated tests, and compliance checks.4---56# Accessibility Audit78> WCAG 2.2 compliance audit and implementation for Next.js applications910## Metadata1112- **Name**: accessibility-audit13- **Version**: 1.0.014- **Author**: webrenew15- **Tags**: nextjs, accessibility, a11y, wcag, aria, screen-reader, keyboard, compliance1617## When to Use1819This skill should be used when:20- Auditing a Next.js application for WCAG 2.2 AA compliance21- Implementing accessible components (dialogs, tabs, forms, navigation)22- Setting up automated accessibility testing (axe-core, Playwright, eslint-plugin-jsx-a11y)23- Fixing keyboard navigation, focus management, or screen reader issues24- Preparing for enterprise compliance (ADA, Section 508, EN 301 549, VPAT)25- Reviewing component library usage (shadcn/ui, Radix) for accessibility correctness26- Handling dynamic content announcements, route changes, or live regions2728## Summary2930Systematic 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.
webrenew