Landmarks

For this exercise, we will focus on one small part of WAI-ARIA called landmark regions. Landmark regions help screen reader users do what others do when they glance at a page, i.e., see its different parts from a bird’s-eye view. They also make it easy to move the screen reader’s reading cursor to different locations on the page.

1. Turn on VoiceOver.
2. Press Ctrl + Opt + u.
3. Press right arrow until you hear “Landmarks”.
4. Press down arrow to read the landmark list.
5. Press enter to move the VoiceOver reading cursor to the beginning of one of the landmark regions.

Exercise: ARIA landmarks

Live editor

Result

How many landmarks did you find on the page?

There are several types of landmark roles. Some of them are:

• <main>, <div role="main"> – Equivalent to “directing the gaze” of the screen reader user. Should contain only the primary content of the page.
• <nav>, <div role="navigation"> – contains a set of links or elements for navigating the site
• <aside>, <div role="complementary"> - content that supplements the main content
• <div role="search"> - search widget
• <header>, <div role="banner"> - the banner of the page
• <footer>, <div role="contentinfo"> - information about the page such as copyright, help, and information links that appear in the footer

Further resources:

• Introduction to ARIA
• Top 5 Rules of ARIA
• Other ARIA roles documented in the WCAG spec
• More about ARIA states and properties
• More about authoring practices