Landmark One Main
Minor - WCAG LEVEL AAA
This accessibility issue arises when a webpage does not have a designated main landmark. The main landmark is crucial for assistive technologies, as it helps users, particularly those using screen readers, to quickly navigate to the primary content of the page. Without this landmark, users may struggle to find the main content, leading to a frustrating experience.
For users with disabilities, especially those who rely on screen readers, a main landmark acts as a navigation aid. It allows them to skip repetitive content and jump directly to the main information they need. This is particularly important for users with cognitive disabilities or those who may have difficulty processing large amounts of information. A clear structure enhances usability and ensures that all users can access the content effectively.
How to Fix It:
To resolve this issue, you need to include a <main> element in your HTML. Here’s a step-by-step guide:
Identify the main content of your webpage that you want users to focus on.
Wrap this content in a
<main>tag. The<main>element should only appear once per page and should not be nested within other elements like<header>,<footer>, or<article>.Ensure that the
<main>element is semantically correct and contains the primary content of the page.
Best Practices:
Use the
<main>element only once per page to avoid confusion.Ensure that the main content is distinct and not mixed with navigation or footer elements.
Consider using ARIA roles if your layout is complex, but remember that the
<main>element is already a semantic landmark.
Common Mistakes:
Nesting the
<main>element within other sections, such as<header>or<footer>, which is invalid HTML.Having multiple
<main>elements on a single page, which can confuse assistive technologies.Forgetting to include the
<main>element altogether, leaving users without a clear navigation point.