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:
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:
- You can provide a landmark for the search area (which doesn’t have an equivalent HTML5 element)
- 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:
<body> <header role="banner"> // header content here <div role="search"> // Search here </div> </header> <main role="main"> <nav role="navigation"> // Navigation links here </nav> // Main content here <aside role="complementary"> // Complementary content here </aside> </main> <footer role="contentinfo"> // Footer content here </footer> </body>
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.