Landmark No Duplicate Main
Minor - WCAG LEVEL AAA
The issue of having multiple 'main' landmarks in a document arises when developers include more than one <main> element or use ARIA roles incorrectly to designate multiple main content areas. The <main> element is intended to encapsulate the primary content of a document, and having more than one can confuse assistive technologies, such as screen readers, which rely on these landmarks to provide users with a quick way to navigate to the main content.
For users with disabilities, especially those using screen readers, encountering multiple main landmarks can lead to confusion and difficulty in understanding the document's structure. This can hinder their ability to efficiently navigate and comprehend the content, as they might not be able to discern which section is the primary focus.
To fix this issue:
Ensure that your HTML document contains only one <main> element.
If your page layout requires multiple sections that might seem like 'main' content, consider using other semantic elements like <section>, <article>, or <div> with appropriate ARIA roles, but reserve the <main> element for the primary content area.
Best practices:
Placing the <main> element directly after the <header> and before the <footer> to maintain a logical document flow.
Avoid using the role="main" attribute on any element other than the <main> element itself, as this can also lead to multiple main landmarks.
Common mistakes:
Wrapping multiple unrelated sections in <main> tags or using role="main" on multiple elements.
Always ensure that the <main> element is unique and accurately represents the primary content of the page.