Using navigation landmarks

When a sighted person visits a page on the GOV.UK website, they can take it in at a glance. They can quickly identify the header and footer, the main content area and navigation, and other things like a search. Someone who is blind and who uses a screen reader cannot do this, but a feature of the GOV.UK website provides a practical alternative.

Every page on the GOV.UK website includes landmarks. Like landmarks on a map, landmarks on web pages are recogniseable features used for navigation. The landmarks on GOV.UK match the visible features of each page - the header (banner), main content area, navigation, footer (content info) and search area.

How does this help screen reader users?

Screen readers recognise these landmarks and provide shortcut keys for finding them. In this video a screen reader user is moving between landmarks on the GOV.UK homepage. As the screen reader moves to each landmark it announces which bit of the page it has reached.

The transcript for the video is:

"Main region"
"Search region"

You can find the keyboard shortcuts for landmarks in different screen readers in this article on basic screen reader commands for accessibility testing.

How are landmarks created?

You can use standard HTML5 elements to provide some landmarks. The <header>, <main>, <nav>, <footer>, and <aside> elements all provide landmarks for screen readers by default.

You can also use the ARIA (Accessible Rich Internet Applications) role attribute to provide landmarks. This is useful for two reasons:

  1. You can provide a landmark for the search area (which doesn’t have an equivalent HTML5 element)
  2. You can make landmarks more backwards compatible for older browsers and screen readers

We know that some people use the GOV.UK website with older browsers and screen readers, so we use both the HTML5 elements and ARIA roles to make sure the landmarks are available to as many people as possible. A good example is Internet Explorer 11, which does not have accessibility support for the HTML5 elements used to provide landmarks, but which does support the equivalent ARIA roles.

What does the code look like?

A simple example might look like this:

<header role="banner">
// header content here

<div role="search">
// Search here

<main role="main">
<nav role="navigation">
// Navigation links here

// Main content here

<aside role="complementary">
// Complementary content here
<footer role="contentinfo">
// Footer content here

Note that each of the HTML5 elements also has the corresponding ARIA role applied. The exception is the <div> containing the search, which only has the ARIA role because there is no corresponding HTML5 element.


Follow @LeonieWatson on Twitter and don't forget to sign up for email alerts.


  1. Šime Vidas

    Would you recommend labeling landmarks with the aria-label attribute? For instance, this very page has 3 header elements; how does a screen reader user differentiate between them when moving between landmarks?

    Link to this comment Reply
    • Leonie Watson

      It can help to use aria-label to provide more information, yes. This article was written before HTML5 support was as widespread, but it explains how to use aria-label to do this:

      That said, the header and footer elements are exceptions to the rule. These elements should only be exposed to screen readers when they are children of the body element. In other words screen readers should not be aware of multiple headers/footers on a page - so providing extended labels is not necessary.

      Link to this comment Reply
  2. Chris Moore

    Do you think we should have an ARIA landmark for the search region of the banner?

    JAWS 15 introduced the quick key (Q) to jump straight to the main content region of a page, I would love to see other screen readers adopt a similar shortcut.

    Link to this comment Reply

Leave a comment