Ensure the Document Has At Most One Main Landmark

Yotam Flohr
Researcher
Blind Hearing Mobility
WCAG 2.1 Level A

Written and researched for humans by humans

Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments: 0
Your entire domain
Get detailed instructions on how to resolve every accessibility issue on your website

Web accessibility standards state that there should only be one main landmark to navigate to the primary content of a page. If the page contains iframe elements, each iframe should either contain no landmarks, or just a single landmark.

Why It Matters

It’s much easier for screen reader users to navigate a web page if all of the content splits between one or more high-level sections. Content outside of these sections can be difficult to locate and its purpose may be unclear.

Fixing the Issue

Developers should ensure there is a navigation point to the primary content of a page. 

All content should also be contained within a landmark region, designated with HTML5 landmark elements and/or ARIA landmark regions.

It is a best practice to use both HTML 5 and ARIA landmarks to ensure all content is contained within a navigational region. In HTML5, you should use elements like header, nav, main, and footer. Their ARIA counterparts are role=”banner”, role=”navigation”, role=”main”, and role=”contentinfo”, in that order.

Once added, screen reader users can navigate to a section based on its ARIA landmark or HTML element. This is a simple replacement for a skip navigation link.

Good Code Example

A simplified web page, stripped down to just the bare landmark essentials, might look something like this:

Code example
<header role="banner"> <p>Put company logo, etc. here.</p> </header> <nav role="navigation"> <ul> <li>Put navigation here</li> </ul> </nav> <main role="main"> <p>Put main content here.</p> </main> <footer role="contentinfo"> <p>Put copyright, etc. here.</p> </footer> Even those that typically live harmoniously together can have bouts with romantic rivals, which can potentially escalate in the more confined setting of a zoo. [...]</p> <div role="contentinfo"> <p>[...information about this article...]</p> </div> </main> <footer> <p>Brought to you by North American Zoo Partnership</p> </footer> Copy