Landmark and Region Issues: Giving Screen Readers a Map of the Page

Most screen readers offer a shortcut to jump directly between a page's major structural regions — header, navigation, main content, sidebar, footer — the same way a sighted user's eye jumps straight to the part of the page they need without reading everything in between. That shortcut only works if those regions are actually marked up as landmarks, either via semantic HTML5 elements (<header>, <nav>, <main>, <footer>, <aside>) or their ARIA equivalents (role="banner", role="navigation", role="main", role="contentinfo", role="complementary").

This falls under WCAG Success Criterion 1.3.1 (Info and Relationships), Level A.

The two most common failures

Content that isn't in any landmark at all. A page built entirely from generic <div>s with no semantic structure gives a screen reader user nothing to jump between — every piece of content is equally undifferentiated, forcing a slow, linear read-through of the entire page just to find the main content.

<!-- Before: no structure a screen reader can use to navigate -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>

<!-- After: real landmarks -->
<header>...</header>
<nav>...</nav>
<main>...</main>

More than one <main> (or role="main") on a page. A page should have exactly one main landmark identifying the primary content — having zero means there's no "jump straight to the content" shortcut at all, and having two or more leaves a screen reader user unsure which one is actually the primary content area.

Why <div class="nav"> isn't equivalent to <nav>

This is a recurring theme across almost every accessibility fix: a CSS class name conveys nothing to assistive technology. class="nav" is purely a styling hook; <nav> is a semantic element with meaning built into the accessibility tree that every screen reader understands automatically. The visual result of a class-named <div> and a real <nav> element can be pixel-identical while being worlds apart for a screen reader user.

A practical landmark checklist

• One <header> (or role="banner") for site-wide branding/header content
• One <nav> per distinct navigation menu (a header nav and a footer nav can both exist, each labeled if there's more than one: <nav aria-label="Footer">)
• Exactly one <main> wrapping the page's primary, unique content
• One <footer> (or role="contentinfo") for site-wide footer content
• <aside> for genuinely tangential content (a sidebar, a related-links widget) — not for content that's actually part of the main flow

Getting this right on a shared site template fixes the violation across every page at once, the same way a single lang attribute or skip link does.

Official references

• Deque University: landmark-one-main
• Deque University: region