FresherTechnicalAccessibility

What are landmarks and how do they help screen reader users?

Try answering first

Model answer

Landmarks are named regions of a page that screen reader users can list and jump between, instead of reading everything from the top. They work like a map of the layout.

Most come free from semantic HTML:

<header> (page level) maps to banner.
<nav> maps to navigation.
<main> maps to main: the primary content, used once per page.
<aside> maps to complementary.
<footer> (page level) maps to contentinfo.
<search> or role="search" marks a search region.
<section> and <form> become region and form landmarks only when they have an accessible name.

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

Rules:

Use one <main>.
When a landmark type appears more than once, give each a unique label, such as two nav elements.
A <header> inside an <article> is not a page banner.
Do not make everything a landmark; too many make the list noisy.

Landmarks give structure at almost no cost, so use the native elements first.

Key points

Landmarks let users jump between page regions
header, nav, main, aside and footer map to landmark roles
Use one main and label repeated landmarks
Do not over-use landmarks

Likely follow-ups

When does a section element become a landmark?
How do you check landmarks with a screen reader?

Common mistakes

Using several unlabeled nav elements
Building the layout from divs with no landmarks