What does this accessibility issue mean?
Accessibility issue summary: accessibility landmark with “main” role is not top-level
If an accessibility landmark has “main” as its role attribute, it should always be used as a top-level landmark. Main landmarks should only be used to mark the main content area of the webpage.
On websites, accessibility landmarks enable blind or visually impaired visitors using screen readers to jump to various sections of a web page.
Other landmark roles that should only be used on top-level landmarks include:
- banner
- contentinfo
- complementary
Solution:
Ensure accessibility landmarks with a “main” role attribute are top-level landmarks on a page.
Example HTML violation: Main landmark not top level (A11y Best Practice Violation)
<header>
<h1>Welcome to Our Website</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<div role="navigation">
<div role="main"> This is the main content of web page. </div>
</div>The above HTML violates the landmark-main-is-top-level accessibility rule because the "main" landmark is nested within another landmark, specifically the "navigation" landmark. This is problematic because the main landmark should be at the top level of the document structure.
To rectify this issue, the "main" landmark should be removed from the "navigation" landmark.
Additionally, it is recommended to use the <main> tag instead.
How to fix "Main landmark not top level (A11y Best Practice Violation)" issue
<header>
<h1>Welcome to Our Website</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav> This is the main content of web page.In this version the <main> tag is used as the "main" landmark outside of the navigation landmark which is created using </main><nav> tag. This complies with the landmark-main-is-top-level accessibility rule as specified by the W3C.
Learn more here at the W3C Accessibility Initiative.</nav>
