Module 8: Accessibility · Lesson 3 of 7
HTML Landmarks: header, nav, main, aside and footer
All lessons in Module 8
Goal: Split a page into landmarks that screen reader users can jump between.
Learn
In the Module 4 page layout lesson you met <header>, <nav>, <main>, <aside> and <footer>. A screen reader treats each one as a landmark, a signpost the user can reach with a single key, like the floor buttons in a lift. Getting to the main content takes one keypress, and nobody has to sit through the whole menu first.
Habits worth building:
- Put every piece of content inside a landmark.
- Use exactly one
<main>per page. - If a page has two landmarks of the same kind, name them so users can tell them apart:
<nav aria-label="Main">and<nav aria-label="Footer">.
aria-label gives an element a name that only assistive technology hears, as the W3C guide to landmark regions (opens in a new tab) recommends. The Outline tab lists your landmarks and their names.
The short version
- Screen readers announce
<header>as banner,<nav>as navigation,<aside>as complementary and<footer>as content info. <header>and<footer>count as page landmarks only outside<main>,<article>,<section>,<aside>and<nav>.- A
<section>turns into a landmark (a region) once it has a name, for example fromaria-label. - Keep landmark names short and leave the role out: write
aria-label="Main", and skip "Main navigation".
Example
<header>
<h1>Corner Cafe</h1>
<nav aria-label="Main">
<a href="menu.html">Menu</a>
<a href="hours.html">Hours</a>
</nav>
</header>
<main>
<h2>Today's Special</h2>
<p>Tomato soup with fresh bread.</p>
</main>
<footer>
<nav aria-label="Footer">
<a href="jobs.html">Jobs</a>
</nav>
</footer>Your task
City Library's page has no landmarks, so the Outline tab has nothing to jump to. Wrap the content:
- A
<header>with the<h1>and the first menu inside a<nav aria-label="Main">. - One
<main>around This Week and its paragraph. - An
<aside>around Opening Hours and its paragraph. - A
<footer>with the copyright line and the second menu inside a<nav aria-label="Footer">.
Then open the Outline tab. It should list five landmarks, two of them named navs.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<nav aria-label="Main navigation">
<a href="books.html">Books</a>
</nav>Right
<nav aria-label="Main">
<a href="books.html">Books</a>
</nav>The screen reader adds "navigation" by itself, so the user hears "Main navigation navigation".
Wrong
<div class="header">
<h1>City Library</h1>
</div>
<div class="main">
<h2>This Week</h2>
</div>Right
<header>
<h1>City Library</h1>
</header>
<main>
<h2>This Week</h2>
</main>Assistive technology ignores class names, and only the real elements create landmarks that users can jump to.
Go deeper
Screen reader users can jump between landmarks. Sighted people who only use a keyboard can't. So many sites also put a skip link first in the body: <a href="#content">Skip to main content</a>, pointing at <main id="content">. It can stay visually hidden until it gets focus. Landmarks plus a skip link meet WCAG 2.2 success criterion 2.4.1, Bypass Blocks (opens in a new tab).
You can also name a landmark after a visible heading, using aria-labelledby in place of aria-label: <aside aria-labelledby="hours-title"> plus <h2 id="hours-title">Opening Hours</h2>. The name then always matches what sighted users see, and it gets translated with the page.
Don't overdo it. Ten named regions turn the landmark list into noise. Stick to the five classic landmarks and name only the ones that repeat. The semantic HTML guide explains which element suits each region.
Try it yourself. In the free NVDA screen reader on Windows, press D to move from landmark to landmark. On a Mac, open the VoiceOver rotor and choose Landmarks.
Frequently asked questions
What are landmarks in HTML?
They are the big regions of a page: the banner, navigation, main content, footer and so on. HTML creates them with <header>, <nav>, <main>, <aside> and <footer>. A screen reader can list them and jump straight to any one. Users skip the menus that repeat on every page and land on the content they came for with a single keypress.
Do I need to add role attributes to HTML landmark elements?
No. <main> already has the main role, <nav> has the navigation role, and so on. <main role="main"> was a workaround for very old browsers. Today it adds nothing. Use the native element, and reach for role only when HTML has no element for what you need.
Does every page need a main element?
Yes. Every page should have exactly one visible <main> around its central content, leaving out the site header, menus and footer that repeat on every page. Screen reader and keyboard users ask for "jump to main content" more than anything else, which makes it the landmark that counts most. Browser reader modes use it to find the article text too. The HTML standard's definition of the main element (opens in a new tab) spells out where it may appear.
Tags in this lesson
Read next
Semantic HTML explained with before-and-after examples
Semantic HTML with real examples: the landmark elements, article vs section, rewriting a page of div soup, and what meaningful tags do for accessibility and SEO. Checklist included.
An HTML accessibility checklist for beginners (WCAG 2.2)
A WCAG 2.2 checklist for the parts of accessibility you control in HTML: lang, headings, alt text, labels, keyboard, focus, contrast and ARIA, plus a 5-minute keyboard test.