Landmark regions on websites

When developing a website you should use landmark regions as a way of identifying common areas of a website to colleagues who use assistive technologies such as screen readers. For instance, these could be the header, navigation, main content area and footer on a webpage. This will help them to navigate between the regions of the page and better understand the page structure.

You can highlight the landmark regions for banner, navigation, search and main on the top half of the Scottish Government homepage by using accessibility insights.

Image example of top half of gov.scot homepage:

Using accessibility insights you can also highlight the end of the main landmark and the content information (footer) landmark on the bottom of the homepage.

Image example of lower half of gov.scot homepage:

People who are blind and browse with a desktop screen reader or with a mobile screen reader rely on the screen reader announcing the role of landmark regions. When a screen reader encounters a landmark region, such as navigation, it will announce 'navigation'. This lets someone who is blind know what part of the page they're on. They can use keyboard commands to jump to other regions on the page.

Types of landmark

HTML elements can provide most common landmarks, with the exception of the search landmark. These can be provided using Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA), which is a tool to build accessible interactive web content. If you can't use the HTML elements you need, you can use ARIA to create them instead.

Header landmark

In HTML use the <header> element. If the <header> element is inside an <article>, <aside>, <main>, <nav> or <section> element, the landmark is not shown to screen readers.

In ARIA use role='banner' on the element that contains the header content. If the container element is inside an <article>, <aside>, <main>, <nav> or <section> element, the landmark is not shown to screen readers.

Footer landmark

In HTML use the <footer> element. If the <footer> element is inside an <article>, <aside>, <main>, <nav> or <section> element, the landmark is not shown to screen readers.

In ARIA use role='contentinfo' on the element that contains the footer content. If the container element is inside an <article>, <aside>, <main>, <nav> or <section> element, the landmark is not shown to screen readers.

Main landmark

In HTML use the <main> element. 

In ARIA use the role='main' on the element that contains the main content. 

Navigation landmark

In HTML use the <nav> element.

In ARIA use role='navigation' on the element that contains the navigation.

Complementary landmarks

In HTML use the <aside> element.

In ARIA use role='complementary' on the element that contains the complementary information.

Search landmarks

There is no HTML element with a built-in search landmark.

In ARIA use role='search' on the element that contains the search feature.

Labelling landmarks

When multiple landmarks of the same type are repeated in a page it's a good idea to give them a label. 

If a landmark begins with a heading element, for example <h1> to <h6>, the heading can be used as the label for the area using aria-labelledby attribute. This works well for main landmarks where there is an <h1> at the start of the content.

If an area does not have a heading element, provide a label using the aria-label attribute. This works well for repeated navigation landmarks such as a main navigation and categories on a blog.

How to design patterns for landmarks

To improve user experience for colleagues who use screen readers, you should follow these best practices when implementing landmarks:

• each webpage should only have one main landmark, unless there are nested document and/or application roles (for example in an iframe)
• pages can have more than one header, footer, navigation, complimentary search or footer landmarks
• if using landmarks on a page, make sure all content is contained within a landmark and nothing is left outside of a landmark
• if possible, position the main heading <h1> after the start of the main landmark in the content order
• all page content should be contained by landmarks
• when pages contain more than one landmark of the same type, or the content of the landmark does not contain a heading describing the contents, provide a unique label

Tips

Follow these tips to improve user experience for your colleagues:

• consider lists together with headings and landmark regions, as these should all work together so parts of the page are discoverable
• try to make the landmarks and top-level heading structure consistent across the website or application where possible (for example, the <h1> is always after the <main> element)