Next.js Accessibility Checker

Accessibility on Next.js

Next.js is a React framework that renders pages on the server and then hydrates them in the browser, with client-side navigation between routes. That mix means the page a visitor sees can change after load, and a static look at your source code will not show what ends up in the DOM.

Next.js gives developers good defaults, such as a route announcer and an image component that requires alt text, but it cannot know whether the alt text is meaningful, whether the language is right or whether a custom dialog works with a keyboard. A scan of the rendered page covers what the build tools cannot.

Next.js documents its built-in route announcer, which announces client-side page changes to assistive technology, and its ESLint setup that can include accessibility rules. Both help, but neither can tell you whether the page your visitors finally see is accessible. (opens in a new tab, source: Next.js Docs: Accessibility)

Common Accessibility Issues on Next.js Sites

• Client-side route changes

  Navigation without a page load needs a unique title for each route and sensible focus handling, or screen reader and keyboard users do not know the page has changed.

• next/image alt text

  The image component asks for an alt prop, but it is often set to a file name, left generic or filled with an empty string on images that carry meaning.

• Page language and metadata

  A hard-coded or missing lang attribute in the root layout, and the same title on every route, affect every page on the site.

• Custom dialogs, menus and dropdowns

  Components built from divs and click handlers, rather than buttons and links, are missing roles, names and keyboard support.

• Loading and error states

  Skeletons, spinners and streamed content appear without being announced, and form errors rendered by client components often are not tied to their fields.

How AccessBell Scans Your Next.js Site

1. Enter any public page. Paste the address of a page on your Next.js site into the scanner above. There is nothing to install: no plugin, no code snippet and no login.
2. We load it in a real browser. AccessBell opens the page in headless Chrome and runs its scripts, so it tests what your visitors actually see, including content added by your theme, apps or plugins.
3. We run the WCAG rules. The open-source axe-core engine checks the page against the standard you choose, and every result is mapped to the WCAG success criteria it affects.
4. You see what is wrong in seconds. The free scan lists every issue it finds, ranked by severity, with the WCAG criteria each one fails. Start a free trial to get the failing code and the fix for each one. Our methodology explains exactly what runs and what still needs a person.

What You Get From the Free Scan and the Free Trial

Free, with no account

• 63 automated rules for WCAG 2.2 Level AA, or presets for WCAG 2.1 AA, the ADA, Section 508 and EN 301 549
• Every issue found on the page, ranked by severity from critical to minor
• The WCAG success criteria each issue fails, which you can look up in our WCAG library

With a 3-day free trial

• The failing HTML, so you can find the element in your Next.js editor or code
• How to fix each issue, with a corrected example
• Every page scanned, up to 500 per domain, with daily monitoring and an email when something breaks
• A list of checks that need a person to review, so nothing is missed
• A dated record of your scans and fixes

Start 3-day free trial

How to Fix What the Scan Finds

1. Give every route a unique, descriptive title through the metadata API, and set the lang attribute in the root layout from the page’s real language.
2. Use real buttons and links, and a tested dialog or menu component, rather than rebuilding them from divs.
3. Add accessibility linting and tests to your build, and use a scan of the deployed site as the check on what actually shipped, including after each deploy.
4. Run a free scan above on your homepage and a few key pages, fix issues starting with critical and serious, then rescan to confirm.
5. For ongoing protection, AccessBell Pro monitors up to 500 URLs per domain every day and alerts you when a theme, app or plugin update introduces a new issue.

Related Guides

• WCAG 4.1.3 Status Messages Explained in Plain EnglishWCAG 4.1.3 Status Messages explained simply: what counts, how to announce it with role status, alert, progressbar or aria-live, form errors and how to test.
• WCAG 4.1.2 Name, Role, Value Explained in Plain EnglishWCAG 4.1.2 Name, Role, Value explained simply: give every control a name, role and state with native HTML and ARIA, with code examples and how to test.
• Keyboard Accessibility TestingA practical guide to keyboard accessibility testing: what to check, the exact keys to use, and a component-by-component reference table mapped to WCAG.
• WCAG Success Criteria LibraryLook up any success criterion the scan flags, in plain language.
• Next.js ADA Compliance CheckerThe same scan with the ADA preset, plus the ADA risks specific to Next.js sites.
• Free Accessibility Statement GeneratorPublish a statement once your Next.js site's known issues are fixed.

Next.js Accessibility — Frequently Asked Questions