Skip to main contentSkip to site search
Honeycomb

Landmarks

Semantic HTML tags have an incredibly important role in making accessible web sites. Screen readers can find region landmarks so users can jump straight to them without having to tab through the entire document, saving them a lot of time but only if they are implemented correctly.

They also make your code more organized and easier to maintain.

Some automatic accessibility testing tools will raise an error if your page does not have page landmarks, as a rule of thumb all of your content must be withing one landmark or another. In this tutorial we'll cover each landmark and what are they used for, as well as their requirements.

Header (banner)

  • The header element represents the "banner" landmark
  • Contains introductory content, e.g.:
    • Logo
    • Main site navigation
    • Search form
  • Honeycomb component: Header
  • Usually it's the first element in the page
  • Place skip links at the beginning of the header element

Main

  • The main element and landmark is the most important section of the page
  • Only 1 visible / reachable main landmark is allowed in a page
  • Screen-readers can find the main landmark and allow users to skip directly to it
  • Should be reachable with a skip link at the beginning of the page
  • Think carefully about what is the most important section of the page you are building
  • Don't simply wrap everything in the main element, that doesn't help anybody
  • Examples:
    • The search box is the main content of FlixBus's home page
    • But on the list of outbound trips, the list is the main content, while the search box becomes a secondary section

Article

  • The article indicates a block of content that can be syndicated or distributed
  • The content inside can be understood independently of where it’s inserted
  • Use it to wrap:
    • Newspaper and magazine articles
    • Blog posts
    • Product cards
    • User comments
    • Cooking recipes
  • All articles must be identified by a heading
  • The nav is unarguably one of the most useful elements, it represents the "navigation" landmark
  • Screen readers can find and index navigation landmarks so users can jump through them
  • The must have a label that will identify the navigation, either an aria-label or, if they have a heading, connect them with aria-labelledby
  • Examples of navigation labels:
    • "Main" navigation
    • "Breadcrumbs" navigation
    • "Pagination" navigation
  • If you have two navigation elements that are identical (main navigation at the header and at the footer, for example) they should have the same label, this allows screen readers to ignore one of them since they represent redundant content
<nav aria-label="Main">
  <ul>
    <li><a class="hcr-link-10-8-1" href="/route-map">Route map</a></li>
    <li><a class="hcr-link-10-8-1" href="/services">Services</a></li>
    <li><a class="hcr-link-10-8-1" href="/about-us">About us</a></li>
    <li><a class="hcr-link-10-8-1" href="/contact">Contact</a></li>
  </ul>
</nav>
<nav aria-labelledby="breadcrumbs-title">
  <h2 class="hcr-h2-10-8-1 toc-anchor" id="breadcrumbs-title">Breadcrumbs</h2>
  <ul>
    <li><a class="hcr-link-10-8-1" href="/">Home</a></li>
    <li><a class="hcr-link-10-8-1" href="/services">Services</a></li>
    <li><a class="hcr-link-10-8-1" href="/refund" aria-current="page">Refund</a></li>
  </ul>
</nav>
  • The footer element represents the "content info" landmark
  • In most pages is located at the bottom of the page
  • Typically used for:
    • Copyright data
    • Footer navigation (usually the same as the main site navigation you find at header)
    • Contact information like phone numbers and company address

Aside

  • The aside element represents the "complimentary" landmark
  • Contains a portion of content that is not directly related to the main content or article, or is not part of the normal flow
  • Examples:

Section

  • The section element is perhaps the most controversial landmark, because of the lack of understanding on how to use them and why
  • The purpose of the section is to separate content in relevant blocks
  • Sections only become valid landmarks when they have an accessible label (aria-label or aria-labelledby), otherwise, the section element will behave just like a div and will do nothing for the user
  • A good sectioning example is, in a recipe, you can have a “Ingredients” section and a “Instructions” section, with their titles connected to the section elements via aria-labelledby
  • Another example is the search box on the list of outbound trips, where it no longer is the main content of the page

Form

  • A form are also landmarks, but will only become one when they have an accessible name (aria-label or aria-labelledby)
  • Always associate the form title with the form element by using an id and aria-labelledby attributes
  • Use fieldsets to group up inputs that have something in common, for example, a passenger information fieldset can be created containing passenger first name, family name and birthday
  • Every single form input needs a label, no exceptions
  • Make sure to give enough time for users to fill out the form and correct any errors they may encounter
  • Each form should be wrapped with the form tag and the user should be able to submit it by pressing Enter
  • You can create a special "search" landmark, to represent search forms, by setting the role of a form element to search, like so: form role=“search”