The importance of landmarks for screen reader users

Having an accessible website is more important now than ever following the enforcement of the European Accessibility Act (EAA) on 28 Jun 2025.

When building your website, it is important to remember that structure matters just as much as design. For people using screen readers or other assistive technologies, navigating a page without clear organisation can feel chaotic. That is where landmarks come in.

In this guide, we’ll explain what they are, why they matter for accessibility, and how to use them correctly.

What is a Landmark?

In web accessibility, a landmark element is a way of marking up the main regions of a page so that assistive technologies, like screen readers, can identify them more efficiently.

HTML landmark elements act like signposts, allowing users to jump straight to key areas such as headers, navigation, and main content.

They can be created in two main ways:

1. Native HTML landmark elements such as <header>, <nav>, <main>, <aside>, and <footer>

2. ARIA landmarks such as role="main", role="navigation", or role="search"

Despite their importance, landmarks are often underutilised, leading to frustrating experiences for blind and visually impaired users who rely on assistive technology.

To learn more about the wider business impact of accessibility and how features like semantic HTML and ARIA landmarks also support SEO, read our article on why accessibility in the EU is a strategic investment.

What is the Importance of Landmark Elements?

The RNIB states that there are more than two million people living with sight loss in the UK, with over 300,000 who are registered blind or partially sighted.

Yet, many websites remain incompatible with screen readers, presenting a significant barrier to access for those using screen reader technology.

Landmarks play a critical role in the following:

• Reducing accessibility barriers – Screen readers can bypass repetitive blocks and reach the content that matters to them.

• Supporting compliance – Correct use of landmark elements helps demonstrate your organisation’s commitment and compliance with accessibility regulations, including the European Accessibility Act (EAA).

• Improving user experience – Consistent structure and clearer navigation benefit everyone, not just those using assistive technologies.

Landmark elements are not just aids for assistive technologies; they are a cornerstone of inclusive design that ensures equal access to digital content for all.

How to Use Landmarks

To ensure you are using landmarks correctly, we recommend keeping the following best practices in mind:

• Use semantic HTML first – Guide users through your page using landmark elements such as <header>, <nav>, <main>, <aside>, and <footer>, all of which are automatically recognised by assistive technologies.

• Use one <main> landmark per page – This element represents the primary content area on your page. You should avoid using multiple <main> elements, as this can cause confusion, unless they are appearing in embedded documents.

• Label duplicates clearly – If you use more than one navigation or complementary landmark, add a label so it can be easily recognised e.g. aria-label

• Ensure meaningful content is contained – Place the important parts of your page inside landmarks so assistive technology users can reach them quickly.

• Use ARIA landmark roles only when needed – Native HTML should be your first choice, using ARIA landmarks like role="search" only if there is not suitable HTML element.

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.

For accessible and compliant builds that follow best practice, explore our Web Development services that ensure accessibility is built into your projects from the start.

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!

To see how well your site is performing, consider an accessibility audit, or for more guidance and practical tips, explore our resource hub.