Landmark Main Is Top Level
Minor - WCAG LEVEL AAA
The issue at hand is the incorrect placement of the <main> landmark in your HTML document structure. The <main> element is intended to encapsulate the primary content of the document and should be positioned directly under the <body> tag, without any other elements intervening. This is crucial for assistive technologies, such as screen readers, as it allows users to quickly navigate to the main content of the page without having to sift through other elements like headers, footers, or sidebars.
For users who rely on screen readers, the <main> landmark serves as a vital navigation tool. It helps them understand the layout of the page and locate the primary content quickly. If the <main> element is nested within other elements, it can confuse users, making it harder for them to access the information they need. This can lead to a frustrating experience, especially for those with cognitive disabilities or those who rely on keyboard navigation.
How to Fix It:
Identify the Location: Locate the
<main>element in your HTML structure. It should be one of the first elements after the<body>tag.Reorganize the Structure: Ensure that the
<main>element is not wrapped inside other elements like<header>,<nav>, or<footer>. Move it to the top level of the document structure.Validate: Use tools like WAVE or Axe to validate that the
<main>landmark is correctly positioned.
Best Practices:
Always ensure that the
<main>element is unique and only appears once per page.Use semantic HTML elements (like
<header>,<nav>,<footer>, etc.) appropriately to enhance overall accessibility.Consider using ARIA roles if you have complex layouts, but prefer native HTML elements when possible.
Common Mistakes:
Nesting the
<main>element within other structural elements, which can lead to confusion for assistive technologies.Forgetting to include the
<main>element altogether, which deprives users of a clear navigation point for the primary content.