With landmarks, blind users using a screen reader have the ability to jump to sections of a web page.
In HTML there are some semantic elements that can be used to define different parts of a web page:
How - Example from The White House
The front page of The White House is using landmarks. It consists of a
<header> at the top, a
<main> containing all the main content and a
<footer> with some
<nav> elements at the bottom.
One way to visualize landmarks is to use the tool Accessibility Insights. One of the features is that it highlights the landmarks, as we can see in the following screenshot.
Try it yourself. Download the browser extension Accessibility Insights and turn on the landmark visualization. Is your favorite site using landmarks?
But wait, it shows
navigation. This is a bit confusing. The reason is that each landmark element has a corresponding role. We have not talked about roles in this course so far. We will get back to this, but as a simplified explanation:
<header> has a built in role of banner. This means that both
<header role="banner"> and
<div role="banner"> are more or less equivalent. For most cases,
<header> will be sufficient.
The same is true for
<nav>, which has
role="navigation" built in.
<main> is easier, it has
role="main". And then we have
<footer> with its
role="contentinfo". Let us leave the roles for now.
More than one of each landmark
A rule of thumb is to only use one
<main> per page. When we use more than one type of landmark, like multiple
<nav>s like in this example, we must label each of them. This is done with the attribute
In the footer of The White House, we have three
<nav>s, each with an
aria-label="social navigation". This means that a screen reader user can skip directly to the social navigation. A helping hand. Some will say that to use the wording "navigation" as a part of the label of a
<nav> is redundant. There is no right and wrong, but
aria-label="social" should be fine.
Ever since the landmarks were introduced to HTML, developers have been confused. Two of the elements that people find vaguely defined are
<section>. Let us try to clarify a bit. The big difference is that an <aside> is related to the main content and the
<section> is not related.
The contact page of The White House uses both an
<aside> and a
<section>. The three sharing buttons are inside an
<aside>. This makes sense, they are related to the main content. If you use them, you will share the page you are on.
The Stay Connected is a
<section>. Good. It is not related to the main content, and no other landmark will be
appropriate. One improvement that The White House can do with these landmarks is to add labels. This will be better for a screen reader user.
<section aria-label="Newsletter"> and
<aside aria-label="Share this page"> would be helpful.