HTML Landmarks for Screen Readers: Accessible Page Structure

HTML landmarks help screen reader users move around a page quickly by marking the major regions of the document, such as the header, navigation, main content, and footer. When you use the right semantic elements, assistive technologies can build a clear map of the page without extra work.

Quick answer: Use semantic HTML5 elements like header, nav, main, aside, and footer to create landmarks. Screen readers use these regions to jump between major areas of the page, but only if you structure them clearly and avoid duplicate or nested landmark confusion.

Difficulty: Beginner

You’ll understand this better if you know: basic HTML element syntax, the idea of semantic tags, and how headings help organize content.

1. What Are HTML Landmarks for Screen Readers?

Landmarks are special page regions that screen readers can identify and list for fast navigation. In HTML, landmarks usually come from semantic elements that describe the purpose of a section rather than just how it looks.

header identifies introductory content for a page or section.
nav identifies a block of navigation links.
main identifies the primary content of the page.
aside identifies related but secondary content.
footer identifies closing information for a page or section.

These elements create a structural map that helps people who cannot scan the page visually. Instead of tabbing through every link or reading from the top every time, they can jump directly to the content area they need.

2. Why HTML Landmarks Matter

Landmarks reduce friction for keyboard and screen reader users. On a large site, a person may need to move from the global navigation to the main article, then to a sidebar, then back to the footer. Landmarks make that sequence much faster and less tiring.

They also improve document clarity for everyone. A well-structured page is easier to maintain, easier to style, and easier for search engines and other tools to understand. Most importantly, landmarks are a core part of accessible navigation, not an optional enhancement.

3. Basic Syntax or Core Idea

Landmarks come from semantic HTML rather than special visual styling. The browser does not need a class named landmark; it needs a meaningful element that expresses the role of the content.

Minimal landmark structure

This example shows the core pattern for a simple page. The landmarks are the major regions a screen reader can announce and move between.

<header>
  <p>Site title and branding</p>
</header>

<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/articles">Articles</a>
</nav>

<main>
  <h1>Article title</h1>
  <p>Main content goes here.</p>
</main>

<footer>
  <p>Copyright and legal links</p>
</footer>

This structure gives the page a clear entry point, a navigation region, one primary content region, and a closing region. The aria-label on nav helps distinguish it from any other navigation landmarks on the page.

4. Step-by-Step Examples

Example 1: A basic article page

A blog post or documentation page usually has a site header, a main article, and a footer. Those regions are easy to identify as landmarks.

<header>
  <h1>DevDocs10</h1>
</header>

<main>
  <article>
    <h1>Landmarks for Screen Readers</h1>
    <p>Learn how to structure accessible pages.</p>
  </article>
</main>

<footer>
  <p>Updated 2026</p>
</footer>

Here, the page has one clear main landmark and a nested article for the article content. That makes the page easier to skim with both headings and landmarks.

Example 2: Navigation with a clear label

If a page has more than one navigation area, each one should be named so screen reader users can tell them apart.

<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/guides">Guides</a>
<//nav>

<nav aria-label="Section">
  <a href="#install">Install</a>
  <a href="#usage">Usage</a>
</nav>

Without labels, multiple navigation landmarks can sound identical. With labels, users can choose the right one immediately.

Example 3: Sidebar content as an aside landmark

Related content such as a glossary, related links, or a callout panel often belongs in an aside landmark.

<main>
  <article>
    <h1>Accessibility Basics</h1>
    <p>The main article content goes here.</p>
  </article>
</main>

<aside aria-label="Related resources">
  <h2>Related resources</h2>
  <ul>
    <li><a href="/articles/html-headings">HTML Headings</a></li>
    <li><a href="/articles/aria-label">ARIA Labels</a></li>
  </ul>
<//aside>

The aside is not the central purpose of the page, so it should not replace the main content. It is related material that can be reached when needed.

Example 4: A full page with multiple landmarks

This layout combines the common landmark regions used in many real sites.

<header>
  <p>Company branding</p>
<//header>

<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/pricing">Pricing</a>
  <a href="/support">Support</a>
<//nav>

<main>
  <article>
    <h1>Welcome</h1>
    <p>Primary page content.</p>
  <//article>
<//main>

<aside aria-label="Announcements">
  <p>New feature announcement.</p>
<//aside>

<footer>
  <p>Contact, legal, and social links</p>
<//footer>

This is the kind of structure screen readers can quickly interpret because each major region has a purpose. The page is organized by meaning, not by visual layout alone.

5. Practical Use Cases

Documentation sites that need a clear path from global navigation to article content.
News articles where the main story, related links, and site navigation are separate regions.
Dashboards with a primary workspace and secondary panels.
E-commerce pages where filters, product content, and support information are distinct areas.
Marketing pages with repeated calls to action and supporting information in side content.

In each case, landmarks help users jump directly to the region they need instead of exploring the entire page linearly.

6. Common Mistakes

Mistake 1: Using generic divs instead of semantic landmarks

Many beginners build every region with div elements and classes, then expect screen readers to recognize the structure automatically. They will not unless the markup exposes meaning through semantic elements or ARIA roles.

Problem: A plain div does not create a landmark, so the page has no navigable structure for assistive technology.

<div class="header">Brand</div>
<div class="nav">
  <a href="/">Home</a>
</div>
<div class="main">Content</div>

Fix: Use semantic elements that already carry the landmark meaning.

<header>Brand</header>
<nav aria-label="Primary">
  <a href="/">Home</a>
</nav>
<main>Content</main>

The corrected version works because semantic elements expose the page structure to screen readers without extra styling tricks.

Mistake 2: Adding more than one main landmark

A page should normally have one primary main landmark. Multiple mains confuse navigation and can make the page harder to interpret.

Problem: Two main elements can create an invalid or confusing document structure for screen reader users.

<main>
  <h1>Page title</h1>
</main>

<main>
  <p>More content</p>
</main>

Fix: Keep one main landmark and place other content inside sections, articles, or asides.

<main>
  <h1>Page title</h1>
  <section>
    <p>More content</p>
  </section>
</main>

The corrected version gives the page one clear primary content area and avoids landmark confusion.

Mistake 3: Forgetting labels when landmarks repeat

Some pages need more than one navigation or aside landmark. If they are not labeled, screen reader users may hear several identical entries and not know which is which.

Problem: Repeated landmarks without labels can sound the same, making navigation slower and more error-prone.

<nav>...</nav>
<nav>...</nav>

Fix: Add aria-label or another accessible name to distinguish each landmark.

<nav aria-label="Primary">...</nav>
<nav aria-label="Footer">...</nav>

The corrected version helps assistive technology distinguish between similar regions immediately.

7. Best Practices

Use semantic landmarks first

Prefer native HTML elements before adding ARIA roles. Native landmarks usually provide the best support with the least markup.

<main>
  <article>
    <h1>Accessible pages</h1>
  </article>
</main>

This is better than wrapping the content in generic containers and trying to retrofit meaning later.

Keep one clear primary content area

Most pages should have a single main landmark. That landmark should hold the page’s central content, not the site header or sidebar.

<main>
  <article>...</article>
</main>

This helps assistive technology identify the page’s focal point instantly.

Name repeated landmarks clearly

If your page contains multiple navigation, aside, or form regions, add labels so users can distinguish them.

<aside aria-label="Related articles">...</aside>
<aside aria-label="Newsletter signup">...</aside>

Labels turn repeated landmark names into useful navigation choices instead of duplicates.

8. Limitations and Edge Cases

Landmarks help navigation, but they do not replace headings. Screen reader users often rely on both.
Not every section needs a landmark. Overusing landmark elements can make the page noisier, not clearer.
A section element is not automatically a landmark unless it has an accessible name in many accessibility mappings, so use it for document structure, not as a substitute for major regions.
Nested landmark regions can be confusing if they are not meaningful. Use them only when the nested region is truly important.
Visual placement does not determine landmark meaning. A sidebar in the markup is only an aside if the element and content relationship actually fit that role.

Note: Screen reader support is generally strong for native HTML landmarks, but exact announcements and navigation shortcuts can vary by browser and assistive technology.

9. Practical Mini Project

Here is a small but complete page layout for an accessibility-focused article site. It shows the landmarks most common on real content pages.

<header>
  <h1>Accessibility Guide</h1>
  <p>Practical HTML guidance for better pages.</p>
<//header>

<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/guides">Guides</a>
  <a href="/contact">Contact</a>
</nav>

<main>
  <article>
    <h2>Landmarks for Screen Readers</h2>
    <p>Use semantic regions to help users navigate faster.</p>
  </article>
<//main>

<aside aria-label="Related links">
  <h2>Related links</h2>
  <ul>
    <li><a href="/articles/html-headings">HTML Headings</a></li>
    <li><a href="/articles/aria-label">ARIA Labels</a><//li>
  </ul>
<//aside>

<footer>
  <p>© 2026 Accessibility Guide</p>
</footer>

This example creates a clear page map: branding at the top, a labeled navigation region, one main content area, a related-content sidebar, and a footer. A screen reader user can move between those landmarks instead of reading every line in sequence.

10. Key Points

Landmarks are structural regions that help screen reader users jump around a page.
Semantic HTML elements are the best way to create landmarks.
Use one clear main landmark for the primary content.
Label repeated landmarks so they can be distinguished.
Landmarks work best when combined with headings and a sensible document outline.

11. Practice Exercise

Build a simple article page with these requirements:

One page header with a site title.
One labeled nav for primary links.
One main landmark containing a single article.
One aside for related links with an accessible name.
One footer with copyright text.

Expected output: A page structure that screen readers can navigate by region.

Hint: Use semantic HTML first, then add aria-label only when a landmark appears more than once or needs a clearer name.

Solution:

<header>
  <h1>Travel Notes</h1>
<//header>

<nav aria-label="Primary">
  <a href="/destinations">Destinations</a>
  <a href="/tips">Tips</a>
</nav>

<main>
  <article>
    <h2>Planning a Weekend Trip</h2>
    <p>Start with your destination, budget, and schedule.</p>
  </article>
<//main>

<aside aria-label="Related resources">
  <h2>Related resources</h2>
  <ul>
    <li><a href="/budgeting">Budgeting</a></li>
    <li><a href="/packing">Packing checklist</a></li>
  </ul>
<//aside>

<footer>
  <p>© 2026 Travel Notes<//p>
<//footer>

This solution uses landmarks exactly where they help most and keeps the structure simple enough for assistive technologies to interpret reliably.

12. Final Summary

HTML landmarks give screen reader users a fast way to understand and move through a page. The most reliable approach is to use semantic HTML5 elements such as header, nav, main, aside, and footer for the major page regions.

Good landmarks are clear, consistent, and not overused. Keep one main content area, label repeated regions, and support landmarks with headings that describe the content inside them.

If you want to go further, next learn how headings, skip links, and ARIA labels work together with landmarks to create a truly accessible page structure.