Overview

A thoughtfully structured, responsive layout with proper use of landmarks and headings plays an important role in ensuring good accessibility. This not only makes website user experience better for everyone, including those with disabilities, but it also helps people easily find and understand information, making the online experience user-friendly for all.

Landmarks

Landmarks provide a mechanism for assistive technology to quickly convey the structure of a page. These landmarks include:

• header
• nav
• main
• aside
• section
• footer

It is important to use these elements only for their intended purpose so that the structure doesn’t become confusing to assistive technology users. When used properly it provides a quick way for the user to skip ahead to the content they are looking for. For example they might skip straight to “main”, so that they can then use the header hierarchy to find the specific topic they would like to read.

Layouts and flow order

As more and more ways to access the web become available, it is impossible to know what device someone is going to use to view your website. Because of this it is important for all users that the layout and flow order of the website remains logical regardless of the size of screen or type of device being used.

If a customer using a mobile phone sees the content in a different order to someone viewing on a desktop computer it could be confusing and hard to follow. The same is true for someone using assistive technology, if the elements do not announce in the order someone would see it on the page that would be confusing.

Text within an element must wrap according to the width of the container element. This is to ensure that text does not go off-screen and create a horizontal scroll on the page. This can be difficult to navigate for everyone, but especially for people who are using magnifying assistive technology, and would fail an accessibility compliance check.

There is more information about how we structure our content on our Layouts page.

Hierarchy

Hierarchical means arranged in order from most important to least important. On a website that means using headings in order of their importance, starting with “H1” for the page title, “H2” for the main content sections, and so on.

It is important to use headings in the correct order, and avoid using them for alternative purposes, such as making the text bigger or smaller.

• H1 is always the page title, and there should only be one on the page
• H2 should be used for the main headings of the page
• H3 should be used as subheadings within H2
• H4 should be used as subheadings within H3
• H5 should be used as subheadings within H4

The reason this is important is that people using assistive technology can use the headings to scan the content of the page. This gives them a quick way to skip forward to the content they are looking for, instead of having to read the entire page which can be time consuming.

Resizable typography

Text size on web pages can be affected by factors such as browser defaults and user settings. To ensure that the user has control over how they view your website, style text with relative units known as “rem”. This means that as the user zooms in the text size will increase, but maintain its relative size to the elements around it.

To meet accessibility guidelines a user must be able to resize text up to 200 percent without use of assistive technology, and without loss of content or functionality.

There is more information about proper format and use of typography on our Typography – Digital Use page.