DailyRNG
Login
Basic

Reading order and landmarks

A screen reader follows the source, not the design. If the source order is navigation, then sidebar, then article, that is what the listener hears. Landmarks let a listener jump, but only if the order inside them is honest.

What you will see

If there are two nav elements, at least one carries a distinguishing label.

About 1 min of reading

Try It

Check the outline of one page

1

Count landmarks

grep -oE '<(header|nav|main|aside|footer)\b' index.html | sort | uniq -c

Before you run it, say out loud what it will print. Then open the answer.

What it prints
At most one of each, and exactly one main.
2

List the heading sequence

grep -oE '

Before you run it, say out loud what it will print. Then open the answer.

What it prints
A sequence like h1 h2 h2 h3. Any jump from h1 to h3 is a missing level.
3

Read it without CSS

curl -s http://localhost:3000/ | sed 's/<[^>]*>//g' | tr -s ' \n' ' \n' | head -40

Before you run it, say out loud what it will print. Then open the answer.

What it prints
The visible text in source order. If it reads coherently, the order is honest.
4

Name duplicate landmarks

grep -c 'nav' index.html; grep -c 'aria-label' index.html

Before you run it, say out loud what it will print. Then open the answer.

What it prints
If there are two nav elements, at least one carries a distinguishing label.
Do not add a skip link to every page. One at the top of pages that repeat a large block is enough, and extra ones add noise.

Data Flow

Source order to a listening path
1 Parse the document top to bottom
↓
2 Announce each landmark on entry
↓
3 Announce headings as they appear
↓
4 Listener can jump between landmarks
Why this works
How to check order cheaply

Read the HTML with the CSS disabled, or use a text-only browser. If the text makes sense in that order, it makes sense to a listener.

Where landmarks fail

A landmark with a generic role and no name is announced as 'region', which is useless. Name it with aria-label when there are two of the same kind.

Examples

One nav, one main

Use <header>, <nav>, <main>, <aside>, <footer> once each where they apply. Exactly one <main> per page; two means the reader cannot tell which is the content.

Headings in order

h1 then h2 then h3, with no skips. A skip is a missing section that a listener expects to find, and it is one of the most common audit failures.

Skip the repeated block once

A single 'Skip to content' link at the top, targeting the id of <main>. It belongs once, and only if the page repeats a large block before the content.

Words this lesson uses

Each one is defined here on this site. Open the entry for the full definition and the other words it points at.

← Focus, and why it must be visible
Previous Lesson
Focus, and why it must be visible
Next Lesson
Contrast and color that is not the message
Contrast and color that is not the message →