Ensure the Document Has At Most One contentinfo Landmark
Blind
Hearing
WCAG 2.1 Level A
Web accessibility standards state that each page shouldn’t have more than one contentinfo landmark.
Landmarks allow blind users to navigate and find content more quickly and easily, so you should keep the total number of landmarks as low as possible. When landmarks are missing, screen reader users need to sort through too much extra information to find what they need.
Developers should ensure a document has no more than one contentinfo landmark.
The role=”contentinfo” ARIA landmark is used exactly once on elements that are unique on the page.
The ARIA specification states that the landmarks role=”banner”, role=”main”, and role=”contentinfo” are meant to be used only once per page. Other ARIA landmarks can be used multiple times. Interestingly, the HMTL5 specification allows multiple instances of the equivalent landmarks: header, main, and footer. The official restriction is only on ARIA landmarks. Even so, it is appropriate in most web designs to have only one each of these landmarks, whether they are specified using ARIA or HTML5.
<div role="banner">Visit Your Local Zoo!</div>
<div role="main">
<h1>The Nature of the Zoo</h1>
<article>
<h2>In the Zoo: From Wild to Tamed</h2>
<p>What you see in the zoo are examples of
inborn traits left undeveloped. [...]</p>
</article>
<article>
<h2>Feeding Frenzy: The Impact of Cohabitation</h2>
<p>Some animals naturally group together with their own kind,
but others stake solitary claim on their territory.
Even those that typically live harmoniously together can
have bouts with romantic rivals, which can potentially
escalate in the more confined setting of a zoo. [...]</p>
</article>
</div>
<div role="contentinfo">
<p>Brought to you by North American Zoo Partnership</p>
</div>
Copy
In this example, two types of landmarks (main and role=”contentinfo”) which should be used only once have been used multiple times on the same page.
<header>Visit Your Local Zoo!</header>
<h1>The Nature of the Zoo</h1>
<main class="article">
<h2>In the Zoo: From Wild to Tamed</h2>
<p>What you see in the zoo are examples of
inborn traits left undeveloped. [...]</p>
<div role="contentinfo">
<p>[...information about this article...]</p>
</div>
</main>
<main class="article">
<h2>Feeding Frenzy: The Impact of Cohabitation</h2>
<p>Some animals naturally group together with their own kind,
but others stake solitary claim on their territory.
Even those that typically live harmoniously together can
have bouts with romantic rivals, which can potentially
escalate in the more confined setting of a zoo. [...]</p>
<div role="contentinfo">
<p>[...information about this article...]</p>
</div>
</main>
<footer>
<p>Brought to you by North American Zoo Partnership</p>
</footer>
Copy