Empty headings on Next.js
What this is
3 headings have no text. Screen readers announce an empty heading and it adds a pointless stop in the page outline.
Who it affects
- Screen reader users
Standards
How to fix it
- Add text to the heading, or remove the element (use a `<div>`/`<p>` if it only creates spacing).
Example
Before
<h2></h2>After
<h2>TODO: heading text</h2>Or delete the empty heading if it is only used for spacing.
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.
More fixes
Automated testing detects only a portion of WCAG issues. Manual testing is required to assess full conformance.