Add landmarks/regions to a page
Overview
Landmarks are helpful for understanding a broad sense of the page layout, and can help assistive technology users easily navigate to different areas of a webpage. Landmarks include a header, main content, footer, and navigation, among others.
Best Practices and Tips
Using landmarks
Pages should only contain one of the following landmarks each:
- Banner (
<header>) - Main (
<main>) - Contentinfo (
<footer>)
Page text should be contained within landmarks whenever possible (i.e. important content shouldn't be left out of landmark navigation).
Keep the amount of landmarks down to the most essential. 8 or more landmarks can make navigating more tedious than helpful.
Naming landmarks
If there are multiple instances of the same landmark, like navigations or asides, each one should be named with aria-label or aria-labelledby. The name should be short and descriptive. Use aria-labelledby if there's a visible name to refer to. If not, use aria-label.
Example: There might be two <aside> elements on a page, for complementary info. One might be titled "Resources" and another titled "Sign up for our newsletter." These <aside> regions are unique and contain separate info—they should be named accordingly using aria-labelledby.
Example code
<aside
aria-labelledby="block1">
<h2 id="block1">
Resources
</h2>
<!-- main content -->
</aside>
<aside
aria-labelledby="block2">
<h2 id="block2">
Newsletter Sign Up
</h2>
<!-- main content -->
</aside>
Examples/Patterns
Landmark Roles
| HTML5 Element | ARIA Equivalent |
|---|---|
| header | div role="banner" |
| nav | div role="navigation" |
| main | div role="main" |
| aside | div role="complementary" |
| section | div role="region" |
| form | div role="form" |
| footer | div role="contentinfo" |
| N/A | div role="search" |
Naming Landmarks
Good Pattern
<div role="search"
aria-label="Western">
<nav aria-label="Main">
Announces as "Western search" or "Main navigation."
Redundant Pattern
<div role="search"
aria-label="Western search">
<nav
aria-label="Main navigation">
Announces as "Western search, search" or "Main navigation, navigation," which is redundant.
Using Native HTML (preferred)
<header>
// announces as "banner"
<div role="search"
aria-label="Western">
// announces as
// "Western Search"
<!-- landmark content -->
</div>
<!-- landmark content -->
</header>
<nav aria-label="Main">
// announces as
// "Main navigation"
<!-- landmark content -->
</nav>
<main>
// announces as "main"
<!-- landmark content -->
</main>
<footer>
<nav
aria-labelledby="footnav">
<h2 id="footnav">
Resources
</h2>
// announces as
// "Resources navigation"
<!-- landmark content -->
</nav>
<!-- landmark content --->
</footer>
Using ARIA (less preferred but doable if needed)
// same announcements as
// the previous example
<div role="banner">
<div role="search"
aria-label="Western">
<!-- landmark content -->
</div>
<!-- landmark content -->
</div >
<div
role="navigation"
aria-label="Main">
<!-- landmark content -->
</div>
<div role="main">
<!-- landmark content -->
</div>
<div role="contentinfo">
<div
role="navigation"
aria-labelledby="footnav">
<h2 id="footnav">
Resources
</h2>
<!-- landmark content -->
</div>
</div>