Skip to main content
AccessibilityBrief

More than one H1 heading on Next.js

What this is

The page has several top-level headings (4). Most pages work best with one H1 that names the page.

Who it affects

  • Screen reader users
  • People with cognitive disabilities

Standards

How to fix it

  1. Keep a single `<h1>` for the page title and change the others to `<h2>` (or lower).

On Next.js

Use the correct `<h1>`–`<h6>` element in your components; keep one `<h1>` per page and do not skip levels.

Other platforms

Prompt for an AI coding tool

Scan your site with AccessibilityBrief and you get a ready-to-use prompt for this problem, with the exact elements on your pages filled in.

Check your own website

Paste a web address. The free scan checks one page and shows what it finds.

Example: example.com/pricing. We scan this one page only.

More fixes

Automated testing detects only a portion of WCAG issues. Manual testing is required to assess full conformance.