Landmark roles

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Landmark roles

Landmarks are prominent sections of content on a page.

Screen readers like JAWS and NVDA lets you navigate between landmarks with keyboard shortcuts. Voiceover does not have keyboard shortcut, but it has a command.

There are 8 landmark roles.

1. banner
2. complementary
3. contentinfo
4. form
5. main
6. navigation
7. region
8. search

7 of these 8 landmarks are built into HTML.

Explanation of each role

Banner represents general information that’s placed at the top of the page. It usually includes the logo, company name, and the main navigation. The <header> element has an implicit banner role if it’s not placed in other landmarks.

<header> ... </header>

Complementary represents supporting information that’s related to the main content. The <aside> element has an implicit complementary role.

<aside> ... </aside>

Contentinfo is used to identify information at the end of every page. The <footer> element has an implicit contentinfo role if it’s not placed in other landmarks.

<footer> ... </footer>

Form denotes a form. The <form> element has an implicit form role.

<form> ... </form>

Main is used to identify the main content of the page. The <main> element has an implicit main role.

<main> ... </main>

Navigation is used to identify groups of links for navigating through a website or content. The <nav> element has an implicit navigation role.

<nav> ... </nav>

Region is a generic landmark role. It is used to identify areas that are significant (but don’t fall into other landmark roles). The <section> element has an implicit region role if it is given an accessible name.

Accessible names are really important. We’ll talk about accessible names in a later lesson.

<section aria-label="Section title"> ... </section>

Search identifies a form that’s used for search. This is the only landmark role that’s not bulit into a HTML element.

<form role="search"> ... </form>

Exposing landmarks

At the time of writing, NVDA and Voiceover announce (or expose) all landmark elements except for region and form.

Let’s say you have this HTML.

<header>Header</header>
<aside>Aside</aside>
<footer>Footer</footer>
<form>Form</form>
<main>Main</main>
<nav>Navigation</nav>
<section>Section</section>
<form role="search">Search</form>

Here’s what you’ll hear on a screen reader if you use the “Next Item” command to walk through every element.

Both NVDA and Voiceover will read form and region roles if you provide them with an accessible name. You can do this with aria-label and aria-labelledby. (More on these properties in accessible names and descriptions).

Note: Voiceover announces the form role as group in Safari v13.0.3. Also, it also announces region as empty region if there are no HTML tags within the region.

<form aria-label="login form">Form</form>
<section aria-label="section">Section</section>

Scott O’Hara kept an updated blog post about whether screen readers expose landmark roles correctly.

What you need to know

You need to know the HTML elements for each landmark role. Here they are again:

That’s it!