Landmark regions
This is a big subject matter, but the TLDR; is you need to use them.
Including all perceivable content on a page in one of its landmark regions and giving each landmark region a semantically meaningful role is one of the most effective ways of ensuring assistive technology users will not overlook information that is relevant to their needs.
Why is it important?
Assistive technologies like screen readers offer alternative ways to navigate a web page. As a screen reader works linearly from the start of the page, a user will want navigate the website by landmarks (if defined) and headings to access content quicker.
If the landmark is missing it can make for a painfully slow experience.
On Apple’s VoiceOver, the Rotor tool provides a series of links for landmarks. NVDA has the similar Elements List.
HTML sectioning elements
Although there are various Landmark roles (Banner, Complementary, Contentinfo, Form, Main, Navigation, Region), they have an HTML equivalent which should be used in preference.
- aside
- footer
- header
- main
- nav
- section
- article
- details & summary
- figure & figcaption
A note about the section element
The section element only replaces a region ARIA role when it has an accessible name using aria-labelledby or aria-label.
Search
There is no HTML element that defines a search landmark, so assign the role="search" attribute to a form to define it as a search landmark.
Checking landmarks
If you feel unconfident using a screenreader then you can use a tool like the Silktide Accessibility Checker extension for Chrome.
Alternatively, launch VoiceOver (Command F5), press the VO key combination (usually Control + Option) and U to launch the Rotor. Use the left/right arrow keys to switch the Rotor menu until you reach the Landmarks menu.