Semantic HTML usageWhat it checks and how to fix it

What it checks

Checks the page structure for the four primary landmarks (main, header, nav, footer, or their ARIA roles), a single main element, duplicated landmarks of the same kind that are not told apart with aria-label, and interactive markup misuse: clickable div or span elements, links without an href, and href="#" or javascript: links. Missing 3 or more landmarks, or 10 or more misused elements, fails; any other issue is a warning.

Why it matters

Screen reader users jump between landmarks the way sighted users scan a page, so missing or ambiguous landmarks make a page hard to navigate. A clickable div is not focusable or operable from the keyboard and is not announced as a button. Semantic structure also helps search engines and AI assistants find the main content of the page.

How to fix it

Use the HTML5 sectioning elements, one main per page, and real buttons for actions.

<header>
  <nav aria-label="Primary">...</nav>
</header>
<main id="main">
  ...
</main>
<footer>
  <nav aria-label="Footer">...</nav>
</footer>

When the same landmark appears more than once (two navs), give each a distinct aria-label.

Replace fake buttons and placeholder links:

<!-- Before -->
<div onclick="openMenu()">Menu</div>
<a href="#" onclick="share()">Share</a>

<!-- After -->
<button type="button" onclick="openMenu()">Menu</button>
<button type="button" onclick="share()">Share</button>

Use <a href> only for navigation to a URL and <button> for everything that performs an action.