What does this accessibility issue mean?
Accessibility issue summary: duplicate landmark roles are used on a page
Each accessibility landmark on a given page of your website should have a unique role — or role/label/title — assigned. Do not use duplicate landmark names on a single web page.
Accessibility landmarks enable blind or visually impaired visitors using screen readers to more easily jump to various sections of a web page.
Solution:
Ensure all landmarks on a single web page have a unique role or unique role/label/title combination.
Example HTML violation: Duplicate landmark roles used on a page (A11y Best Practice Violation)
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<title>Ecommerce Website</title>
</head>
<body>
<header>
<h1>Online Shop</h1>
</header>
<main>
<h2>Products</h2>
</main>
<main>
<h2>Best Sellers</h2>
</main>
<footer>Copyright © 2020 Online Shop</footer>
</body>
</html>Explanation: In this example, there are two <main> elements which act as landmarks in the document. The 'Landmark is unique' rule (rule-id: 'landmark-unique') requires each landmark to be uniquely identifiable. Having two landmarks of the same type without unique roles, labels, or titles violates this rule, which can pose challenges for assistive technologies like screen readers, and ultimately the users depending upon these technologies. Here, screen readers may not be able to differentiate between the two <main> sections, creating confusion for the user.
Here is the corrected HTML with the 'Landmark is unique' accessibility rule followed:
How to fix "Duplicate landmark roles used on a page (A11y Best Practice Violation)" issue
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<title>Ecommerce Website</title>
</head>
<body>
<header>
<h1>Online Shop</h1>
</header>
<main>
<h2>Products</h2>
</main>
<section>
<h2>Best Sellers</h2>
</section>
<footer>Copyright © 2020 Online Shop</footer>
</body>
</html>Here, we have replaced the second <main> landmark with a <section> element. Each of the landmarks now have unique roles, fulfilling the 'Landmark is unique' rule.
Now screen readers and other assistive technologies can more effectively understand and navigate this webpage.For best practices in creating accessible websites, refer to the Accessibility resources provided by the Web Accessibility Initiative of the World Wide Web Consortium (W3C).
