Next.js Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance

Next.js is a React-based framework that powers a significant portion of modern web applications, offering server-side rendering, static site generation, and client-side navigation. While Next.js provides some built-in accessibility features like the next/image component with required alt text and eslint-plugin-jsx-a11y for development-time linting, the framework's single-page application nature introduces unique accessibility challenges. Client-side route transitions can leave screen reader users unaware that the page has changed. Dynamic content loading through React state updates may not be announced to assistive technology. The component-based architecture means that accessibility must be considered at every level, from individual UI components to page-level layout and navigation patterns. Many popular Next.js component libraries and UI kits do not fully meet WCAG standards, and developers often build custom interactive components like modals, dropdowns, and tabs without proper ARIA patterns. With the European Accessibility Act requiring digital accessibility compliance, Next.js developers must go beyond basic HTML semantics and implement robust focus management, route change announcements, and keyboard interaction patterns throughout their applications. This checklist addresses the most common accessibility pitfalls specific to Next.js and provides concrete code-level solutions.

Common Accessibility Issues

// No route change handling
import Link from 'next/link';

export default function Nav() {
  return (
    <nav>
      <Link href="/about">About</Link>
      <Link href="/contact">Contact</Link>
    </nav>
  );
}

// RouteAnnouncer component
import { useRouter } from 'next/router';
import { useEffect, useRef, useState } from 'react';

export function RouteAnnouncer() {
  const router = useRouter();
  const [announcement, setAnnouncement] = useState('');
  const mainRef = useRef(null);

  useEffect(() => {
    const handleRouteChange = () => {
      const title = document.title;
      setAnnouncement(`Navigated to ${title}`);
      const main = document.getElementById('main-content');
      if (main) main.focus();
    };
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => router.events.off('routeChangeComplete', handleRouteChange);
  }, [router]);

  return (
    <div aria-live="assertive" aria-atomic="true"
      className="sr-only">{announcement}</div>
  );
}

import Image from 'next/image';

<Image src="/hero.jpg" alt="image" width={800} height={400} />
<Image src="/divider.svg" alt="decorative divider line" width={800} height={2} />

import Image from 'next/image';

<Image src="/hero.jpg" 
  alt="Customer support team assisting a client via video call" 
  width={800} height={400} />
<Image src="/divider.svg" 
  alt="" role="presentation" 
  width={800} height={2} />

<div className="form-field">
  <input type="email" 
    value={email} onChange={handleChange} />
  {errors.email && (
    <span className="error">{errors.email}</span>
  )}
</div>

<div className="form-field">
  <label htmlFor="email">Email address</label>
  <input type="email" id="email"
    value={email} onChange={handleChange}
    aria-invalid={errors.email ? 'true' : undefined}
    aria-describedby={errors.email ? 'email-error' : undefined} />
  {errors.email && (
    <span id="email-error" className="error" 
      role="alert">{errors.email}</span>
  )}
</div>

Next.js-Specific Tips

• Enable eslint-plugin-jsx-a11y in your Next.js project by adding it to your .eslintrc configuration. Next.js includes some accessibility rules by default through next/core-web-vitals, but the full jsx-a11y plugin provides over 30 additional rules that catch common accessibility issues at development time.
• Use Next.js's built-in Image component (next/image) for all images, as it enforces the alt attribute requirement, automatically generates responsive srcset, and adds width/height to prevent layout shift that can disorient users with cognitive disabilities.
• Implement a global focus management strategy by creating a reusable FocusManager component that restores focus to the correct element after route changes, modal dismissals, and dynamic content updates. Place this in your _app.tsx or root layout.
• When using Next.js API routes to handle form submissions, always return structured error responses that your front-end can map to specific form fields with aria-describedby associations, rather than generic error messages that are disconnected from the form inputs.
• Test your Next.js application with JavaScript disabled to verify that server-rendered content is accessible and semantic. Pages rendered via SSR or SSG should be fully readable and navigable before client-side hydration completes.

Recommended Tools

Further Reading

• Accessible Forms Guide
• Keyboard Navigation Testing
• Wcag Explained Plain English

Other CMS Checklists

• Wordpress Accessibility Checklist
• Hugo Accessibility Checklist