How do screen reader users use headings?
Headings are the most common way screen reader users move around a page. In surveys of screen reader users run over many years, most say they start on a new page by jumping through the headings, or by opening a list of them, to get a sense of what is there. Pressing H moves to the next heading, and the number keys 1 to 6 move to the next heading of that level. On a phone, people pick Headings from the rotor or menu and swipe.
That turns your headings into the page’s table of contents. If a section has no heading, it is hard to find. If something looks like a heading and is a styled <div>, as Bike servicing is on the starting page, it doesn’t exist for these users at all. Headings help everyone else too: people with low vision zoomed in, people with ADHD or dyslexia scanning for the part they need, and search engines working out what the page covers.
How many h1 elements should a page have?
Use one <h1> that says what the page is about, and put it at the start of the main content. On the bike shop page, that is Bike servicing. A screen reader user who presses 1 should land on it and know straight away that they are in the right place. The page’s <title> and its <h1> usually say similar things, with the title adding the site name.
HTML allows more than one <h1>, and WCAG doesn’t forbid it. In practice a single <h1> makes the page easier to understand, and screen reader users expect it. The site name or logo in the header is usually not the <h1>: it is the same on every page, so it tells people nothing about this one. An older idea, the HTML outline algorithm, would have let every section start with its own <h1>. Browsers never built it, and it was removed from the standard in 2022, so use explicit levels.
Why should heading levels never skip?
Heading levels describe how sections nest. An <h2> is a main section of the page, an <h3> is a part of the <h2> above it, and so on. When a screen reader announces “heading level 4” straight after “heading level 2”, the listener wonders what they missed, and may go looking for a level 3 heading that isn’t there.
The starting page uses <h4> for Safety check and Full service because someone liked the size of the default <h4> text. Choose the level by position in the outline, then use CSS to set the size. Going back up any number of levels is fine: after the last <h3> under Service levels, the next <h2>, Booking, starts a new section.
Headings must also have text, and that text should describe the section: “Service levels” is useful in a headings list, “More” is not. Don’t use a heading element just to make text big or bold, and don’t leave an empty one for spacing. Both add stops that mean nothing. WCAG 2.2 covers headings in 1.3.1 Info and Relationships and 2.4.6 Headings and Labels.
<h1>Bike servicing</h1>
<h2>Service levels</h2>
<h3>Safety check</h3>
<h3>Full service</h3>
<h2>Booking</h2>
What are landmarks?
Landmarks are the large regions of a page: the site header, the navigation, the main content, the footer and any sidebar. Screen readers list them and let people jump between them, usually with D or R on desktop or the rotor on a phone. Where headings are a table of contents, landmarks are the floor plan.
You get landmarks by using the right HTML elements. A <header> that is not inside an <article>, <aside>, <main>, <nav> or <section> becomes the banner landmark. <nav> becomes navigation. <main> becomes main. A top-level <footer> becomes content info, the landmark for copyright, contact and policy links. <aside> becomes complementary, for content related to the page but separate from it, and the newer <search> element becomes a search landmark.
Every page should have exactly one <main>, and all of the page’s content should sit inside one landmark or another. The <main> element is also what makes a skip link useful, because it gives the link a clear place to land. The **Screen reader** view shows each landmark as a line such as “main landmark”, followed by “end of main landmark” where it closes.
<header>at the top level: banner<nav>: navigation<main>: main, once per page<aside>: complementary<footer>at the top level: content info
How do you tell two navigation landmarks apart?
Many pages have more than one <nav>: a main menu, a footer menu, sometimes breadcrumbs or a list of pages in a section. In a landmarks list, they all show up as navigation, and a user has to visit each one to find the right menu. Give each one a short name with aria-label, or with aria-labelledby if it already has a visible heading.
Keep the names short and leave out the word navigation, since a screen reader says the role as well: aria-label="Main" is heard as “Main navigation”, while aria-label="Main navigation" becomes “Main navigation navigation”. The same goes for two <aside> elements, or anything else that appears twice.
<nav aria-label="Main">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<footer>
<nav aria-label="Footer">...</nav>
</footer>When does a section become a landmark?
A plain <section> is a generic container in the accessibility tree. It becomes a region landmark only when it has a name, from aria-labelledby pointing at its heading or from aria-label. That is deliberate: a page full of unnamed regions would make the landmarks list useless.
Name a section when it is a big, distinct part of the page that people may want to jump to directly, such as a basket summary or a sign-up area on a long page. Most sections don’t need it, because their heading already makes them easy to find. If you find yourself naming every section, the headings are probably doing the job already.
<section aria-labelledby="basket-title">
<h2 id="basket-title">Your basket</h2>
...
</section>How do you check headings and landmarks?
Read only the headings in the Screen reader view, top to bottom. They should make sense on their own as an outline of the page, with one level 1 and no jumps. Then read only the landmark lines. You should see banner, navigation, main and content info, each navigation with its own name, and nothing important outside them.
The Checks view flags a missing <h1>, skipped levels, empty headings and a missing <main>. It can’t tell whether a heading describes its section well, so read them as a stranger would. Browser extensions that show the heading outline, and the accessibility pane in developer tools, help on longer pages. With a real screen reader, open its headings list and landmarks list and see whether you could find your way with nothing else.
What do AI tools get wrong with headings and landmarks?
Generated pages often choose heading levels for their size: an <h3> for card titles straight under the <h1>, an <h5> for small print, or a heading for the price in every product card. They also put the site name in an <h1> on every page, which leaves the real page title as an <h2>. Check the outline in the Screen reader view and set the sizes in CSS.
For landmarks, common faults are a <div id="main"> with no <main> element, <main> used twice in a page assembled from several components, role="navigation" added to a <nav> that already has it, and several <nav> elements left unnamed. Each one is quick to fix once you have listed the landmarks and read them back.
Field notes
- Screen reader users often move around a page by its headings.
- Use one
<h1>that says what the page is about. - Heading levels should go down one step at a time, with no skips.
- When a page has two
<nav>areas, give each one its own name.
Easy to get wrong
Big bold text is only a heading for people who can see it. A screen reader user jumping by heading never finds a styled <div>.
Skipping a level leaves a gap in the outline. Choose the level by its place in the structure and set the size with CSS.
An id doesn’t create a landmark. Only <main>, or role="main", lets screen reader users jump to the content.
The screen reader adds the role itself, so including the word navigation makes it say “navigation” twice.
Questions people ask
Should the logo be the h1?
Usually not. The logo is the same on every page, and the <h1> should say what this page is about. On a home page some sites make the site name the <h1>, which is reasonable when the page has no better title.
Do I still need role attributes like role="main"?
No. The <main>, <nav>, <header>, <footer> and <aside> elements map to landmarks in every current browser. Adding the matching role repeats what the element already says.
Can a heading level go back up?
Yes. After an <h4> you can go straight to an <h2> to start a new main section. Only going down a level should be done one step at a time.
Does every section need a heading?
Every main section of content should have one, because it is how people find it. Small groupings, like a single paragraph of opening hours under a heading that already covers it, don’t need their own.
Is a header inside an article a landmark?
No. A <header> or <footer> inside <article>, <aside>, <main>, <nav> or <section> belongs to that part of the page and is a generic container. Only the page-level ones become banner and content info.