“Landmark” is an umbrella term we use for a number of containers on a page. The
<section> elements are all HTML-native landmarks. WAI-ARIA adds the ability to mark a generic
<div> as a
role="region" because we don’t (yet) have elements in HTML for these landmarks.
Using HTML landmarks and (only where necessary) ARIA landmark roles ensures that screen reader users can navigate directly to a list of landmarks, and then drop into the appropriate section on the page based on the landmark’s name.
It’s important to ensure that each of the landmarks has a unique programmatically-accessible name. If you have text on the page that represents the name, you can use an
aria-labelledby attribute to access it. For example, you may have
<main aria-labelledby="H1ID"> where H1ID is the
id assigned to your page’s top header. You can also use an
aria-label attribute to provide the name.
Note that the names need to be unique because a screen-reader user is choosing from them to navigate your page. If you came to a page that announced that you had three sections to choose from but that they were all named “section”, you’d be annoyed too.
Note also that if the same landmark shows up on most or all pages, you should name it the same thing on most or all pages. A global navigation menu shouldn’t be named “global navigation” on some pages and “global nav” on others and “top nav” on a different set. The user will think those are three different menus.
Let’s say you’re designing a Budgets page that contains a text section describing the purpose of the budget, a dynamic pie chart displaying the user’s budget, and then another text section describing the user’s budget, all inside the
<main> element. You know that the first section is going to be the same every time the user visits, and you hope that will be frequently, so you want screen reader users to have an easy way to jump straight to the pie chart or the additional information.
You might choose to use the
<section> element for the text. But you feel that none of the semantic HTML tags really fit the pie chart, and neither do the ARIA roles that we described above. This is where the
region ARIA role comes into play.
Just like with landmarks, you’ll need to ensure the region has a programmatically-accessible name, marked either with an
aria-label or an
aria-labelledby attribute. Your final element containing the pie chart may look like
<div role="region" aria-label="January 2023 Budget Pie Chart">