What does this accessibility issue mean?
Issue summary: Multiple “main” accessibility landmarks are present on a page
“Main” landmark roles should only be used to mark the main content area of the webpage. The main landmark role should only be used once per page, and should always be a top-level landmark.
On websites, accessibility landmarks enable blind or visually impaired visitors using screen readers to more easily jump to various sections of a web page.
Other landmark roles that should only be used once per page:
- contentinfo
- banner
- complementary
Solution:
Ensure each page only has one landmark using a main role attribute.
Example HTML violation: Multiple main landmarks (A11y Best Practice Violation)
<header>
<nav>
<!-- navigation -->
</nav>
</header>
<main id="content">
<!-- Main content of page-->
</main>
<main id="additional-content">
<!-- More content -->
</main>
<footer>
<!-- Footer info -->
</footer>Explanation:The rule 'landmark-no-duplicate-main' specifies that a page should not contain more than one main landmark. Landmarks can be used for bypassing blocks of repeated content. If more than one main landmark is used, it can cause confusion for screen reader users as the main content might not be unique.
In this code example, there are two main elements which violates this rule.
Here is the corrected code:
How to fix "Multiple main landmarks (A11y Best Practice Violation)" issue
<header>
<nav>
<!-- navigation -->
</nav>
</header>
<main id="content">
<!-- Main content of page-->
<!-- More content can be part of the main content -->
</main>
<footer>
<!-- Footer info -->
</footer>In this corrected code, there is only one main tag that includes all the primary content of the page.
This meets the requirements of the 'landmark-no-duplicate-main' rule, ensuring a single main landmark on the page.
