Issue #16 - Landmarks

published on

HTML allows us to define so-called landmarks, important areas in a page. They can be really helpful, especially for screen reader users.

<body>
  <!-- banner landmark -->
  <header>
    <!-- navigation landmark -->
    <nav>
    </nav>
  </header>
  <!-- main landmark -->
  <main>
    <!-- search landmark -->
    <form role="search">
    </form>
  </main>
  <!-- contentinfo landmark -->
  <footer>
  </footer>
</body>

Benefits

  1. Landmarks help screen reader users with orientation on the page.
  2. Screen reader users may jump from landmark to landmark using keyboard shortcuts.
  3. Screen reader users may list all landmarks on a page and select them.
  4. Sighted users may add a browser extension to jump to landmarks by using keyboard shortcuts.

Landmarks

Landmarks in HTML
ElementARIA roleConditions
headerbannerOnly in context of the body element, not when it's a descendant of <article>, <aside>, <main>, <nav>, or <section>.
navnavigation
mainmain
sectionregionWhen it has an accessible name using aria-labelledby, aria-label or title
formformwhen it has an accessible name using aria-labelledby, aria-label or title
formsearchwith role="search"
asidecomplementary
footercontentinfoOnly in context of the body element, not when it's a descendant of <article>, <aside>, <main>, <nav>, or <section>.

Tips

Here are some tips for using landmarks:

  • If there are multiple navigation landmarks on a page, each should have a unique label (aria-label or aria-labelledby).
    <body>
      <header>
        <nav aria-label="Primary"></nav>
      </header>
      <footer>
        <nav aria-label="Secondary"></nav>
      </footer>
    </body>
    banner, navigation, content information, navigation
    Landmarks listed in VoiceOver on macOS without labels
    banner, Primary navigation, content information, Secondary navigation
    Landmarks listed in VoiceOver on macOS with labels
  • Avoid redundancy when labelling navigations. A label like “primary navigation” may be announced as “primary navigation navigation”, just label it “primary".
  • If a navigation landmark has an identical set of links as another navigation landmark on the page, use the same label for each navigation landmark.
  • Don't add too many landmarks to a page. Too many landmarks can make navigation more difficult and confusing.
  • There should be only one banner landmark.
  • There should be only one contentinfo landmark.
  • A document must not have more than one <main> element that does not have the hidden attribute specified. Having more than one visible <main> element can confuse users because screen readers don’t announce the number of main elements.
  • If there are multiple complementary landmarks on a page, each should have a unique label (aria-label or aria-labelledby).
  • If there are multiple form landmarks on a page, each should have a unique label (aria-label or aria-labelledby).
  • Generally, you shouldn't need explicit roles on landmarks with implicit roles. For example, <header></header> is sufficient, you don't need <header role="banner"></header>.
  • Most landmarks are well supported, but support may vary, especially with form landmarks. It’s advised to test your landmarks with different screen readers and browsers. Some screen readers may intentionally not announce certain landmarks. Don’t worry too much about it, as long as you have a sound document outline.

Resources

Did you enjoy this tip?

Sign up for the HTMHell newsletter and receive an HTML tip or trick every week via e-mail.