What does this accessibility issue mean?
Issue summary: Page is missing a “main” landmark role
To comply with website accessibility best practices, you should use accessibility landmarks on your web pages.
A “main” accessibility landmark role is used to mark the main content of the page for visitors who use screen readers or other assistive technologies. Main landmark roles should only be used once per page, and should always be used as a top-level landmark.
Accessibility landmarks enable blind or visually impaired visitors using screen readers to more easily jump to various sections of a web page.
Solution:
Ensure each page on your website has an accessibility landmark with a “main” role defined.
Example HTML violation: Missing “main” landmark (A11y Best Practice Violation)
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<title>My Ecommerce Site</title>
</head>
<body>
<header>
<!-- ... Site title, navigation, search, etc ... -->
</header>
<section class="featured-products">
<!-- ... Featured products grid ... -->
</section>
<footer>
<!-- ... Site footer ... -->
</footer>
</body>
</html>Explanation: This HTML code violates the 'landmark-one-main' accessibility rule because there is no main landmark.
The main landmark is used to designate the primary content of the page and to allow users, especially those using screen readers, to directly navigate to the primary content of the page. Without a main landmark, users may have difficulty locating or navigating to the primary content of the page.
The corrected HTML code with one main landmark is shown below:
How to fix "Missing “main” landmark (A11y Best Practice Violation)" issue
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<title>My Ecommerce Site</title>
</head>
<body>
<header>
<!-- ... Site title, navigation, search, etc ... -->
</header>
<main id="content">
<section class="featured-products">
<!-- ... Featured products grid ... -->
</section>
</main>
<footer>
<!-- ... Site footer ... -->
</footer>
</body>
</html>In the corrected code, a main landmark is added, this landmark wraps around the featured-products section, indicating that this is the primary content of the page. As a result, the page now adheres to the 'landmark-one-main' accessibility rule.
