skills.rest
AgentiveCity
AgentiveCityOFFICIAL
Explore all skills by this author →
WebsiteGitHub

nextjs-a11y-and-seo-audit

Audit accessibility and SEO issues in Next.js App Router projects.

2|Updated Dec 5, 2025
Search Tags:#accessibility#a11y#frontend#web vitals#metadata#nextjs#seo
One-click install
npx skills add https://github.com/AgentiveCity/SkillFactory --skill nextjs-a11y-and-seo-audit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-a11y-and-seo-audit
Source: https://github.com/AgentiveCity/SkillFactory/tree/main/.claude/skills/nextjs-a11y-and-seo-audit
Command: npx skills add https://github.com/AgentiveCity/SkillFactory --skill nextjs-a11y-and-seo-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensuring Next.js App Router projects are accessible (WCAG, ARIA) and search engine optimized (metadata, semantic HTML) requires meticulous auditing and implementation, which can be time-consuming and complex. This Skill automates the analysis, fixes, and recommendations for a11y and SEO best practices, improving user experience and discoverability.

Core Features & Use Cases

  • Comprehensive Accessibility Audit: Evaluate and fix issues related to semantics, headings, labels, keyboard navigation, and screen reader support (WCAG compliance).
  • SEO Metadata Optimization: Generate and refine metadata, generateMetadata, Open Graph, and Twitter cards for improved search engine visibility and social sharing.
  • Semantic HTML & Structure: Ensure proper use of headings, roles, and semantic HTML for better SEO and accessibility, aligning with Lighthouse scores.

Quick Start

Audit /dashboard/settings for SEO + accessibility issues, make this table keyboard accessible, and write proper OG metadata for product pages.

Frequently Asked Questions about nextjs-a11y-and-seo-audit

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

FAQPage Schema
How do I audit a Next.js app for accessibility and SEO issues?▼

Audit accessibility and SEO in Next.js App Router projects by analyzing components, routes, and metadata for WCAG compliance, semantic HTML, heading structure, and SEO tags. This Skill evaluates semantics, labels, keyboard navigation, and generates optimized metadata including Open Graph and Twitter Cards to improve both user experience and search engine visibility.

What's the best way to implement WCAG compliance and ARIA semantics in Next.js?▼

Implement WCAG and ARIA compliance by ensuring proper semantic HTML, heading hierarchy, keyboard navigation, and screen reader support across your Next.js pages and components. This Skill identifies violations, recommends fixes aligned with Lighthouse scores, and helps structure routes and pages to meet accessibility standards.

How do I generate and optimize metadata in Next.js for SEO and social sharing?▼

Generate SEO metadata using Next.js' metadata API and generateMetadata function to create Open Graph and Twitter Card data for improved search visibility and social sharing. This Skill automates metadata generation, canonicalization, and structured data implementation to enhance discoverability across search engines and social platforms.

Can I make interactive tables and components keyboard accessible in Next.js?▼

Make interactive components keyboard accessible by applying proper ARIA roles, labels, and semantic HTML structure validated against WCAG standards. This Skill audits keyboard navigation, focus management, and screen reader compatibility to ensure tables, forms, and dynamic components are fully accessible.

Why does heading order and semantic HTML matter for Next.js SEO?▼

Heading order and semantic HTML directly impact SEO rankings and accessibility compliance; search engines use heading hierarchy to understand page structure, while assistive technologies rely on semantic elements for navigation. This Skill ensures proper h1–h6 ordering, landmark elements, and semantic tags to improve both Lighthouse performance and user accessibility.

Does Next.js App Router support automated accessibility testing workflows?▼

Yes, Next.js App Router supports automated a11y and SEO testing workflows integrated into your development process. This Skill enables comprehensive audits across pages, metadata generation, and accessibility validation to catch WCAG violations, semantic issues, and SEO problems before deployment.

Related Skills

Explore More Software Engineering Skills→
ByeongminLeeByeongminLee
2

nextjs-app-router-fundamentals

Migrate Next.js 13+ projects from Pages Router to App Router conventions.

Community
Advanced
GuiErbaGuiErba

accessibility

Audit web accessibility against WCAG 2.1 and generate remediation plans.

Community
Basic
gaiastudio-aigaiastudio-ai
2

gaia-test-a11y

Run automated accessibility tests on deployed web applications with axe-core, pa11y, and Lighthouse.

Official
Advanced
padjeipadjei

design-systems-slds-validate

Validate Lightning Web Components for SLDS compliance and generate a detailed scorecard.

Community
Advanced