Ensure the Document Has At Most One Main Landmark
Blind
Hearing
Mobility
WCAG 2.1 Level A
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.
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.
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.
A simplified web page, stripped down to just the bare landmark essentials, might look something like this:
<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