By Genesis AI Services · April 21, 2026 · 8 min read · HTML Structure

How to Write Accessible HTML Structure

Key insight: Screen reader users navigate pages by landmarks and headings — not by reading every word linearly. A well-structured page lets them jump directly to the section they want. A poorly structured one forces them to listen through everything.

Semantic HTML and proper document structure are the foundation of accessibility. They require no extra tooling and cost nothing to implement — but they're consistently missing from the majority of sites audited.

HTML Landmarks

HTML5 landmark elements create regions of the page that screen reader users can jump to directly. Most screen readers have a command to list all landmarks (VoiceOver Rotor, NVDA Insert+F7).

See how 321 websites scored →

View the 2026 Report

HTML Element	ARIA Landmark Role	Purpose
`<header>`	banner	Site-wide header (logo, site name, primary nav)
`<nav>`	navigation	Navigation links — label multiple navs with aria-label
`<main>`	main	Primary content — only one per page
`<aside>`	complementary	Supplementary content (sidebar, pull quotes)
`<footer>`	contentinfo	Site-wide footer
`<section>`	region (if labeled)	Distinct section — add aria-labelledby to create a landmark
`<form>`	form (if labeled)	Form region — add aria-label or aria-labelledby
`<search>`	search	Search form (HTML5.3 element)

Well-Structured Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Products — Accessalyze</title>
  <meta name="description" content="...">
</head>
<body>

  <!-- Skip link (first focusable element) -->
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <!-- Site header -->
  <header>
    <a href="/"><img src="logo.svg" alt="Accessalyze home"></a>
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="/products">Products</a></li>
        <li><a href="/docs">Docs</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main content -->
  <main id="main-content" tabindex="-1">

    <!-- Breadcrumb navigation -->
    <nav aria-label="Breadcrumb">
      <ol>
        <li><a href="/">Home</a></li>
        <li aria-current="page">Products</li>
      </ol>
    </nav>

    <h1>Our Products</h1>

    <section aria-labelledby="scanner-heading">
      <h2 id="scanner-heading">Accessibility Scanner</h2>
      <p>...</p>
    </section>

  </main>

  <!-- Sidebar -->
  <aside aria-label="Related resources">
    <h2>Related</h2>
    ...
  </aside>

  <!-- Footer -->
  <footer>
    <nav aria-label="Footer links">...</nav>
    <p>© 2026 Accessalyze</p>
  </footer>

</body>
</html>

Heading Hierarchy

Headings (h1–h6) form the document outline. Screen reader users navigate by heading to jump through sections. The heading hierarchy must be logical:

<!-- WRONG: skips h2, inconsistent -->
<h1>Page Title</h1>
<h3>First Section</h3>   <!-- Skipped h2 -->
<h4>Subsection</h4>

<!-- RIGHT: logical nesting -->
<h1>Page Title</h1>
<h2>First Section</h2>
<h3>Subsection of First Section</h3>
<h2>Second Section</h2>
<h3>Subsection of Second Section</h3>

Rules:

One <h1> per page — the primary page title
Never skip levels downward (h1 → h3 without h2)
Going back up levels is fine (h3 → h2 when starting a new major section)
Use headings for structure, not for visual styling — use CSS for that

Language Declaration

<!-- Required: tells screen readers which language engine to use -->
<html lang="en">

<!-- For pages with mixed-language content -->
<p>The French word <span lang="fr">bonjour</span> means "hello."</p>

Multiple Navigation Regions

If a page has more than one <nav>, each must have a unique accessible name to distinguish them in the landmarks list:

<nav aria-label="Main navigation">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Table of contents">...</nav>
<nav aria-label="Footer links">...</nav>

The Page Title

Every page needs a unique, descriptive <title> element. Screen readers announce it when the page loads. Convention: "Page Name — Site Name".

<title>Products — Accessalyze</title>
<title>Sign Up — Accessalyze</title>
<title>404 Not Found — Accessalyze</title>

Check Your Page Structure

Accessalyze validates heading structure, missing landmarks, and page title issues automatically.

Audit Your HTML Structure →

← Back to Accessalyze

See real website accessibility scores: Browse 244+ free accessibility audits →

Try it yourself

Enter your website URL to get a free accessibility score.