Accessibility widget for Next.js

Next.js renders on the server and hydrates in the browser, so third-party scripts need the right loading strategy to avoid hurting performance or hydration. ClearPath fits cleanly using the built-in next/script component, which is made for exactly this.

Whether you use the App Router or the older Pages Router, you add the ClearPath script in one shared layout so it applies to every page. Visitors get 25 tools and 14 languages, and you keep control over when the script loads.

How to add ClearPath to Next.js

  1. For the App Router, open app/layout.tsx and import Script from next/script.
  2. Inside the body of the root layout, add a Script component pointing to the ClearPath widget URL with strategy set to afterInteractive, plus the data-account and data-api attributes from the snippet.
  3. For the Pages Router, open pages/_document.js and place the same next/script tag with strategy afterInteractive inside the Body, or in _app.js so it loads on every page.
  4. Restart the dev server, then build and deploy so the widget loads across all routes.

Where Next.js sites usually fail

  • Client-side navigation with next/link swaps page content without resetting focus, so screen reader users stay focused on an element that no longer exists after a route change while the new page loads silently.
  • Custom Image components from next/image often ship without meaningful alt text because developers pass empty strings to stop layout shift warnings, leaving product photos and hero banners unreadable to screen readers.
  • Dynamic imports and code-split components loaded with next/dynamic can pop into the DOM after initial render, so keyboard users tab past interactive elements that were not there when the page first loaded.
  • App Router layouts and nested templates frequently duplicate landmark roles like nav and main across parent and child segments, which confuses screen reader users trying to skip to content.

Why Next.js sites choose ClearPath

  • next/script with the afterInteractive strategy loads the widget after the page becomes interactive, so it does not delay hydration.
  • Adding it in the root layout or _document means every route includes ClearPath from one place.
  • The approach works with both server components and client components, since the script is document-level.
  • The auto-generated accessibility statement and per-site analytics reflect your live deployed pages.

Questions

Why use next/script instead of a raw script tag?

next/script lets Next.js manage loading order and strategy, so the widget loads at the right time without breaking hydration. A raw tag in JSX can be stripped or cause warnings.

Which strategy should I choose?

Use afterInteractive. It loads the widget shortly after the page becomes interactive, which suits an accessibility control that visitors reach for after the page is usable.

Does this guarantee my Next.js site is compliant?

No. ClearPath adds a visitor-facing toolbar through next/script and generates an accessibility statement from a live scan of your site, but it cannot rewrite your App Router layouts, fix alt text on next/image components, or manage focus after client-side route changes. Those live in your components and templates, and only changes to that code will resolve them. No widget, on Next.js or any other platform, makes a site compliant by itself.