The importance of landmarks for screen reader users

  • 4 minute read
Back to search

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!

Similar posts

Discover how we’ve helped organisations overcome accessibility challenges and achieve success.

FAQs

No, landmarks are not explicitly required to comply with WCAG Guidelines. However, they are strongly recommended because they support the following key success criteria:

 

  • 1.3.1 Info and Relationships – Ensures that the structure and relationships of content (such as grouping, headings, or semantic regions) are programmatically conveyed.

  • 2.4.1 Bypass Blocks – Allows users to skip repeated content such as navigation menus or headers and jump directly to the main content.

So, while you won’t fail WCAG solely for missing landmarks, using them is considered best practice and shows conformance with accessibility standards.

To ensure best practice, all meaningful content on a page should be contained within landmarks such as <header>, <nav>, <main>, <aside>, and <footer>.

 

Skip links are an exception, as they usually sit before the first landmark to give users a way to jump straight into the main content.

 

In addition, when there is more than one landmark of the same type on a page e.g. two <nav> elements, it is important to provide additional labelling so that users can tell them apart.

There should only ever be one <main> landmark element per page. It represents the primary content area, and multiple <main> elements on a single-page layout can confuse assistive technologies.

See more FAQs

Website accessibility monitoring is the fundamental process of scanning your website to detect any issues that could prevent users with disabilities from using it. Automated web accessibility monitoring tools continuously check for accessibility issues across your site, providing instant alerts for new and updated content, as well as your overall site health.

 

They track compliance with standards like the Web Content Accessibility Guidelines (WCAG) and show you how accessible your site is, where it should be, and what improvements should be made to deliver a better experience for all users.

 

In addition to measuring your compliance, they also provide a clear picture of your progress over time, so you can track the impact of your improvements and maintain ongoing accessibility.

The two main types are automated and manual monitoring. Together, they provide you with a comprehensive view of how accessible your site is and where improvements are needed.

 

  • Automated monitoring uses specialised web accessibility monitoring tools to scan your website for non-compliant features and common issues, such as missing alt text, poor colour contrast, or keyword navigability issues. These tools can also provide instant alerts for when site elements present accessibility risks and site health reports so you can prioritise any issues.

  • Manual monitoring is where accessibility experts and testers come in to review your site as a real user would, often using assistive technologies like screen readers. They will usually check how easy it is to navigate through pages, interact with content, and understand messages or instructions. The aim is to identify any areas which may present barriers for individuals with disabilities.

Accessibility monitoring is crucial for ensuring that everyone can use and experience your site in the same way, regardless of ability. It is also essential for staying compliant with standards like WCAG and with laws like The European Accessibility Act 2025.

 

Without regular monitoring, accessibility issues can easily appear when new pages are added, content is updated, or designs are changed.

 

Continuous website accessibility monitoring gives you a framework to:

  • Stay compliant

  • Improve user experience

  • Respond to issues quickly

  • Track progress over time

Accessibility monitoring should be integrated into your process rather than a one-time check. Websites can change frequently, with new pages, designs, and content changes, but each update can introduce accessibility issues.

 

Continuous monitoring, both manual and through an automated website monitor, is recommended to catch any issues as soon as they appear, particularly after any big changes, such as adding interactive elements, redesigns, and when legal or accessibility guidelines are updated.

 

Even without significant changes, monitoring should be a consistent part of your organisations website maintenance.

 

The more you test the better, but for those looking for an exact amount, ideally once a month is a good starting point to catch any emerging issues.

Book a meeting

This field is for validation purposes and should be left unchanged.

Signup

This field is for validation purposes and should be left unchanged.