sdcorejs-review-accessibility-nextjs

Audits Next.js landing site accessibility across locales using App Router checks and WCAG criteria.

2|Updated Apr 18, 2026
One-click install
npx skills add https://github.com/sdcorejs/sdcorejs-agent --skill sdcorejs-review-accessibility-nextjs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: sdcorejs-review-accessibility-nextjs
Source: https://github.com/sdcorejs/sdcorejs-agent/tree/main/plugin/skills/sdcorejs-review-accessibility-nextjs
Command: npx skills add https://github.com/sdcorejs/sdcorejs-agent --skill sdcorejs-review-accessibility-nextjs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identifies accessibility blockers on a Next.js landing site by running an a11y baseline and Next.js-specific checks across both locales, producing a prioritized audit report with WCAG SC references.

Core Features & Use Cases

  • Cross-track baseline review: Runs baseline accessibility probes first, then adds Next.js App Router concerns to improve coverage.
  • Locale-sensitive findings (VI/EN): Executes Lighthouse and axe/pa11y-style checks per locale to catch language-specific issues.
  • Next.js-specific correctness checks: Validates <html lang>, locale switcher announcements, focus behavior on route changes, and dialog/modal focus management.
  • Actionable output: Categorizes findings into Critical/Important/Minor and links each issue to relevant WCAG Success Criteria for faster remediation.
  • Use case: Pre-launch a landing-page release after navigation, locale switching, or custom components (modals, menus, tabs) are added.

Quick Start

Run an a11y audit for your Next.js landing site and confirm the report includes Critical/Important/Minor findings with WCAG SC references for both /vi and /en pages.

Frequently Asked Questions about sdcorejs-review-accessibility-nextjs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit Next.js App Router accessibility issues across multiple locales?

To audit Next.js App Router accessibility across locales, run automated Lighthouse and axe-core probes on each locale path to validate dynamic html lang attributes, route change focus management, and semantic markup, generating a prioritized report with WCAG Success Criteria references.

What Next.js specific accessibility checks should I run before launching a landing site?

Next.js accessibility checks for pre-launch include validating dynamic html lang updates, verifying focus management on App Router route changes, testing locale switcher announcements, and ensuring dialog and modal focus trapping meet WCAG Success Criteria.

Does this accessibility audit test both VI and EN locale pages separately?

Yes, the accessibility audit executes Lighthouse and axe-core style checks on both /vi and /en locale paths to catch language-specific issues, ensuring the cross-track baseline review covers locale-sensitive findings for each page.

How do I fix focus management issues when navigating between Next.js App Router pages?

Fixing App Router focus management issues requires validating focus behavior on route changes using automated probes, then remediating the identified focus traps or missing focus shifts according to the WCAG Success Criteria referenced in the audit report.

Can I use axe-core and pa11y to validate locale switcher announcements in Next.js?

Yes, axe-core and pa11y style checks can validate Next.js locale switcher announcements by running automated accessibility probes on the locale paths to detect missing ARIA live regions or inadequate semantic markup during language transitions.

Why does my Next.js accessibility report categorize findings into Critical, Important, and Minor?

Accessibility reports categorize findings into Critical, Important, and Minor to prioritize remediation efforts, linking each issue to relevant WCAG Success Criteria so developers can resolve the most severe accessibility blockers on the landing site first.