Go back Solution

3.2. Page Landmarks

Introduction

Here's a myth: "People using screen readers read all the text." Not true. We are all the same: we scan the page looking for keywords until something catches our attention. Only then, we start to actually read it.

Screen Readers 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, which allows SR users to orient themselves in the page and jump directly to them.

Some elements are landmarks by default, such as <main> and <nav>. However, in many cases, we need to explicitly add a landmark role.

<!-- Announced as "header" or "banner" by screen readers -->
<header>...</header>

<!-- When a landmark is used multiple times
an extra label should be added -->
<nav aria-label="website">...</nav>
<nav aria-label="Table of Contents">...</nav>

We can also create custom landmarks to mark important parts of the page.

<div role="region" aria-label="recommended">...</div>

<!-- or -->

<section aria-label="recommended">...</section>

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 the role attribute.

Hint: You can detect the page landmarks in multiple ways:

Bonus

#1 Language of the content

Use a SR to read the "Good morning" part. You'll notice that it's not pronounced correctly in the three idioms presented. This can be an annoying issue for SR users who visit a page in a language different than their system settings.

To fix it, the lang attribute needs to be added to the element that contains a different idiom.

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

🎯 Goal: Add the idiom of any different content.

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

Note #1: All pages in this site have <html lang="en"> by default.

Note #2: In Windows you may not see the country flags emojis (eg 🇫🇷 = FR).

Note #3: Your SR might not include the foreign language required to pronounce the content with the correct accent.

#2 Content hierarchy and relations

You might be aware of <section> and <article> tags and wondering when to use each other. There's no better way to discover it than by using it yourself with a screen reader.

🎯 Goal: Experiment replacing the comments area <div> with section or article. Listen how a screen reader announces them differently.

🍀 Tip: Use aria-label or aria-labelledby to give a name to that area.

Further reading

WCAG Success Criterion

Exercise takeaways

(After the exercise) Reveal takeaways