Landmarks
Landmarks are structural markers that divide a web page into large regions: header, navigation, main content, footer. Screen readers use them to offer direct navigation to each section, without having to read through all HTML sequentially.
A screen reader user opens your site. Instead of reading through each line of HTML, they display the list of page regions and jump directly to the main content. JAWS, NVDA, VoiceOver: all modern screen readers leverage landmarks to offer this shortcut. Your code just needs to provide them.
#Eight roles, eight regions
The WAI-ARIA specification defines eight landmark roles: banner, navigation, main, complementary, contentinfo, search, form, and region. Each identifies a structural section of the page.
In HTML5, several semantic tags automatically create these landmarks:
| HTML Tag | Landmark role |
|---|---|
<header> (child of <body>) | banner |
<nav> | navigation |
<main> | main |
<aside> | complementary |
<footer> (child of <body>) | contentinfo |
Use these tags. No need to add role="navigation" to a <nav>: it's redundant.
A <header> nested inside an <article> or <section> does not create a banner landmark. Same rule for <footer>. Only those that are direct children of <body> count.
#The multiple landmarks trap
Two <nav> tags on the same page? The screen reader announces two "navigation" regions without distinction. Impossible to tell which one leads to the main menu and which one to the breadcrumb trail.
The solution: aria-label.
<nav aria-label="Main menu">...</nav>
<nav aria-label="Breadcrumb">...</nav>Each navigation bears a distinct name.
Another common mistake: multiplying landmarks. The W3C recommends a maximum of seven regions per page. Beyond that, the list in the screen reader looks like a restaurant menu with 40 dishes. You stop choosing.
#A minimal structure that works
<body>
<header>
<nav aria-label="Main menu">...</nav>
</header>
<main>
<!-- main content -->
</main>
<footer>...</footer>
</body>Three landmarks are enough for a simple page. The W3C recommends that all perceivable content resides within a landmark. Text floating between </header> and <main> becomes invisible in region navigation.
On the standards side, the ARIA11 technique of WCAG links landmarks to criteria 1.3.1 and 2.4.1. Criterion 9.2 of the RGAA requires that each major area be structured with its HTML5 tag.
#In summary
Use semantic HTML5 tags: they create landmarks without extra attributes. Label with aria-label when the same type of landmark appears multiple times. Test: enable the VoiceOver rotor or the NVDA region list and verify that each section bears a clear name.