Add landmarks/regions to a page

Applicable Role(s): Developer

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

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. More than 7+ 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="block-title">
  <h2 id="block-title">Resources</h2>
  <!-- main content -->
</aside>
  


<aside aria-labelledby="block-title-2">
  <h2 id="block-title-2">Newsletter Sign Up</h2>
  <!-- main content -->
</aside>

Pattern Examples

Landmark Roles

HTML5 Elements and ARIA Equivalent
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="footer-nav">
   <h2 id="footer-nav">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="footer-nav">
    <h2 id="footer-nav">Resources</h2>
    <!-- landmark content -->
  </div>
</div>

Need Accessibility Help?

Contact Carly Gerard

Contact David Engebretson