The importance of landmarks for screen reader users

Why Landmarks Matter

Landmarks help screen reader users navigate a webpage more efficiently by providing structural regions such as headers, navigation, and main content. Despite their importance, landmarks are often underutilised, leading to frustrating experiences for blind and visually impaired users who rely on assistive technology.

Using <section> Instead of <div> for Landmarks

Many developers default to using <div> elements to structure content, but <section> should be used when a distinct region of content needs a clear heading and purpose. Unlike <div>, <section> is a semantic element, meaning assistive technologies can recognise it more meaningfully.

Example of <section> Used Correctly

<section>
    <h2>Latest News</h2>
    <article>
        <h3>New Accessibility Standards Released</h3>
        <p>The latest Web Content Accessibility Guidelines (WCAG) update introduces stricter criteria...</p>
    </article>
</section>

If a <section> does not have a visible heading for design reasons, a visually hidden heading should be included to ensure accessibility.

Example of a Visually Hidden Heading

<section>
    <h2 class="visually-hidden">Latest News</h2>
    <article>
        <h3>New Accessibility Standards Released</h3>
        <p>The latest Web Content Accessibility Guidelines (WCAG) update introduces stricter criteria...</p>
    </article>
</section>

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

If a <div> is used where a landmark is needed, it must have an appropriate ARIA role. However, using semantic HTML (like <section>, <nav>, <main>, <footer>, and <header>) removes the need for ARIA roles, as these elements are already recognised as landmarks.

How Landmarks Are Used by Screen Readers

Screen readers allow users to navigate quickly through landmarks instead of tabbing through every interactive element. Here’s how popular screen readers handle them:

• NVDA: Landmarks appear in the Elements List (NVDA+F7), and users can move between landmarks using D (next) and Shift+D (previous).
• JAWS: Users can navigate landmarks using R (next) and Shift+R (previous).
• VoiceOver (Mac): Landmarks can be accessed in the Web Rotor (VO+U), under the Landmarks section.

Example of NVDA Elements List with Landmarks:

Elements List - Landmarks
1. Banner (header)
2. Navigation (nav)
3. Main (main)
4. Complementary (aside)
5. Content Info (footer)

Important Landmarks and Their Use

<header>

Represents the page or section header. If used within <article>, it represents a subsection’s heading.

<article>
    <header>
        <h2>How to Improve Website Accessibility</h2>
        <p>Published on March 12, 2025</p>
    </header>
    <p>Web accessibility is an essential part of modern web development...</p>
</article>

<nav>

Defines navigation menus. There can be multiple <nav> elements, such as one for the main navigation and another for secondary navigation.

<main>

Contains the primary content of the page. There should only be one <main> per page.

<main>
    <h1>Welcome to Our Accessibility Blog</h1>
    <p>Here you’ll find the latest updates on digital accessibility...</p>
</main>

<section>

Used for thematically grouped content. If a heading is provided, the section becomes more meaningful.

<article>

Represents a self-contained piece of content like a blog post, news article, or forum post.

<article>
    <h2>How to Improve Website Accessibility</h2>
    <p>Web accessibility is an essential part of modern web development...</p>
</article>

<footer>

Used for the page or section footer. It may contain contact details, copyright information, or related links.

<footer>
    <p>&copy; 2025 Accessible Web Co. All rights reserved.</p>
</footer>

Critique: Overuse of <div> and Missing Landmarks

Some websites rely too heavily on <div> elements without assigning them roles, making navigation cumbersome for screen reader users. If an area is meant to be a landmark, it should be coded semantically.

Poor Example (No Landmarks)

<div>
    <h2>Company News</h2>
    <p>Our company has launched a new accessibility initiative...</p>
</div>

Improved Example (Using <section> and <article>)

<section>
    <h2>Company News</h2>
    <article>
        <h3>New Accessibility Initiative</h3>
        <p>Our company is taking major steps to improve digital accessibility...</p>
    </article>
</section>

Final Thoughts

Landmarks are crucial for improving the browsing experience of screen reader users. By replacing <div> with semantic elements like <section>, <nav>, <article>, and <footer>, developers can create a more accessible web. If you’re not using landmarks in your web development, it’s time to start!