Main landmark should not be contained in another landmark
Accessibility testing for dev teams - No experience required
Compliance Data & Impact
Disabilities Affected
- Blind
- Deafblind
- Mobility
Standard(s)
- Deque Best Practice
How to Fix the Problem
Ensure the main landmark is not contained in another landmark.
Ensure all content is contained within a landmark region, designated with HTML5 landmark elements and/or ARIA landmark regions.
It is a best practice to use both HTML5 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. By using both
HTML5 and ARIA markup, you make the webpage more robust and functional no
matter what screen reader technology is used.
Once added, screen reader users can navigate to a section based on its ARIA
landmark or HTML element. The contentinfo landmark provides a
simple replacement for a skip navigation link, though the replacement is only
useful for users of screen readers. Sighted users or users of screen enlargers
wouldn’t get much benefit from the addition, so it the
contentinfo landmark does not replace skip navigation links
altogether.
Example
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>
The markup for regions and roles is redundant, but this is a transition period, and the above markup is the most robust.
Why it Matters
Navigating a web page is far simpler for screen reader users if the content splits between some high-level sections. Content outside of these sections is difficult to find, and its purpose may be unclear.
HTML has historically lacked some key semantic markers, such as the ability to designate sections of the page as the header, navigation, main content, and footer. Using both HTML5 elements and ARIA landmarks in the same element is considered a best practice, but the future probably favors HTML regions as browser support increases.
The HTML Living Standard states "A hierarchically correct main element is one whose ancestor elements are limited to <html>, <body>, <div>, <form without an accessible name, and autonomous custom elements. Each main element must be a hierarchically correct main element." This may reflect a "best practice" based on W3C validation.
Rule Description
It is a best practice to ensure the main landmark is not contained within
another landmark. All content should be contained within distinct regions such
as the header (role="banner"), content
(role="main"), and footer (role="contentinfo").
The Algorithm (in simple terms)
Ensures that all content on a page is contained within a landmark region.
Resources
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: