What does this accessibility issue mean?
Issue summary: Multiple “contentinfo” accessibility landmarks are present on a page
To comply with website accessibility best practices, there should only be one “contentinfo” role landmark per page.
The “contentinfo” landmark role attribute is used to identify “footer” content on a page and should only be used once on a page. It should also always be used as a top-level accessibility landmark.
On websites, accessibility landmarks enable blind or visually impaired visitors using screen readers to more easily jump to various sections of a web page.
Other landmark roles that should only be used once per page:
- main
- banner
- complementary
Solution:
Ensure each page only has one contentinfo (footer) landmark. Do not use multiple accessibility landmarks with duplicate “contentinfo” role attributes on a single page.
Example HTML violation: Multiple contentinfo landmarks (A11y Best Practice Violation)
<footer role="contentinfo">This is the first contentinfo landmark. </footer>
<footer role="contentinfo">This is the second contentinfo landmark. </footer>Explanation: The above HTML violates the landmark-no-duplicate-contentinfo accessibility rule because it contains two <footer> elements with role="contentinfo". According to the W3C accessibility standards, a web page should not have more than one instance of the contentinfo landmark.
Therefore, having two <footer> elements with the same role causes the violation of this rule.
How to fix "Multiple contentinfo landmarks (A11y Best Practice Violation)" issue
<footer role="contentinfo">This is the one and only contentinfo landmark. </footer>This way, the same content is being presented, but we respect the W3C accessibility guideline to avoid duplication of contentinfo landmarks.
To find more about accessibility rules and guidelines, I recommend visiting the official W3C Web Accessibility Initiative (WAI) website.
