Go Back

3.2. Page Landmarks

Introduction

Here's a myth: "People using screen readers read all the text." They usually don't. We are all impacient when exploring websites. We scan the content looking for keywords until something catches our attention, and only then we start actually reading it. We are all lazy web lovers.

SR users usually navigate the page through headings and landmarks. We already know the importance of a solid heading structure, now let's talk about landmarks.

Landmarks identify sections of a page. This allows SR users to orient themselves in the page and helps them navigating easily to various sections while skipping blocks of content.

Some elements are landmarks by default, such as <main> and <nav>, but in most of the cases we need to explicitly add its landmark role.

<!-- It's sounds redundant but it's needed! -->
<header role="banner">...</header>

<!-- An extra label should be added when a
landmark is used multiple times. -->
<nav aria-label="website">...</nav>
<nav aria-label="T.O.C.">...</nav>

Exercise

In the exercise page, there are at least four landmarks besides the main content: the primary navigation, the search, a custom landmark and another navigation on the bottom of the page.

🎯 Goal: Specify each landmark using role attribute.

Hint: You can detect the page landmarks using Screen Reader (see SR shortcuts) or using an browser extension: Accessibility Insights extension or Landmarks Extension.

Bonus

Language of the page

If you used a SR to read the main part of the exercise page, you may have noticed that "Good morning" is not pronounced correctly in the 3 different idioms presented.

This can be a very annoying issue for SR users that visit a page in a language that's different from their SR default settings.

To fix this A11Y issue we must provide the lang attribute to the element that contains a different idiom.

<!-- "Hello world!" in Portuguese -->
<p lang="pt-PT">Ola mundo</p>

🎯 Goal: Add the idiom of any different content.

Note that all pages in this workshop have <html lang="en"> for convenience.

Tip: Here's a list of all ISO Language Codes to help you.

Notes

Fact: A 2020 study to the top 1 milion webpages revelated that ~29% of the websites didn't specify the document language.