6.9 Landmarks are used correctly
When a sighted user browses a website or app, they immediately see the sections of the page and how they are laid out. On a search result page they can quickly see where they can change their search, where they can sort or filter, and where their results are. For a user who uses a screen reader this is a little more difficult but there are things we can do to make that easier. We can do this using a combination of headings and landmarks. Landmarks Opens in a new window allow us to convey the visual layout by labeling sections of the page. By implementing these landmarks users are provided with a layout of the page and can quickly navigate directly to the section they would like.
Details
- All content on the page is contained in a landmark.
- Every page has a main landmark.
- The site header is contained in a banner landmark.
- The footer is contained in a contentinfo landmark.
- All search forms are contained in a search landmark.
- All non-search forms are contained in a form landmark.
- All navigation links are contained in a navigation landmark.
- All region landmarks are labeled with a heading.
Tips
- For any sections of the page with high importance that don't already have their own landmark, add a region landmark.