Landmark Contentinfo Is Top Level
Minor - WCAG LEVEL AAA
The issue with the 'landmark-contentinfo-is-top-level' rule arises when the <footer> element or any element with the role="contentinfo" is not placed at the top level of the document structure. This means it is nested within other landmark regions, such as <main>, <article>, or <section>, which can confuse assistive technologies like screen readers. These technologies rely on landmarks to help users navigate a page efficiently. When landmarks are improperly nested, it can lead to a confusing user experience, making it difficult for users to understand the structure and content of the page.
To fix this issue:
Ensure that the
<footer>element or any element with therole="contentinfo"is a direct child of the<body>element or is placed at the same hierarchical level as other top-level landmarks like<header>,<nav>, and<main>.This ensures that the page's structure is clear and logical, facilitating better navigation for users relying on assistive technologies.
Best practices:
Keeping the
<footer>at the bottom of the<body>element, unless the design specifically requires multiple footers.Avoid nesting the
<footer>inside other landmarks like<main>or<article>.If you need multiple footers, ensure each is appropriately marked and placed at the top level.
Common mistakes to avoid:
Placing the
<footer>inside a<main>or<article>element.Using
role="contentinfo"on elements that are not intended to serve as a footer or are nested improperly.
By following these guidelines, you ensure that the contentinfo landmark is correctly positioned, improving the accessibility and navigability of your web pages.