Skip to content

Beyond Headings: Landmarks for Accessible Navigation

What Are Landmarks?

HTML landmarks are like major landmarks in a big city—the park, the library, the capital building—instantly recognizable areas or buildings that serve a specific purpose.

Landmarks identify specific sections and their purpose within an HTML document. This makes it easier for people with assistive technology to quickly find what they're looking for.

Some common HTML elements function as landmarks by default:

  • <header>  Introduces the webpage, often containing logos and navigation menus.
  • <nav> The primary navigation section allows users to jump to different parts of the site.
  • <main>  The core content area, where users find the primary information.
  • <aside>  Supplemental content that complements the main content but is distinct from it (think sidebars).
  • <footer>  The closing section, often containing copyright information and contact details.

Example of landmarks on a page. A red arrow points to each landmark on the page. Those landmarks are navigation, main, complementary.

Why Are Landmarks Important?

Landmarks are essential for website accessibility. They empower users with disabilities to navigate websites independently, ensuring everyone has equal access to information.

Landmarks also benefit sighted users. Clearly structuring your website allows users to find information faster, leading to a more positive interaction with your brand.

Using Landmarks for Accessible Websites

Here's how to create a website with clear and effective landmarks:

  • Use the correct elements - Employ the standard HTML sectioning elements (<header>, <nav>, <main>, etc.) for their designated purposes.

  • Descriptive content - Ensure the content within each landmark clearly reflects its purpose. For example, the <main> content should be the most important information on the page.

  • ARIA Attributes - In some cases, consider adding ARIA roles to modify older HTML elements to gain the added benefits of landmarks to existing HTML. To further enhance the landmarks' functionality for assistive technologies, you can also consider using aria-labels to further distinguish landmarks like the different navigation areas within your web pages.


    How ARIA landmark roles help screen reader users

For more detailed information on landmark use and design, please see the article "Landmark Regions,published by the W3C.

"Including all perceivable content on a page in one of its landmark regions and giving each landmark region a semantically meaningful role is one of the most effective ways of ensuring assistive technology users will not overlook information that is relevant to their needs." ~ W3C

Resources

 

Maggie Vaughan, CPACC
Content Marketing Practitioner
DubBot