Ensure the Document Has At Most One contentinfo Landmark

Yotam Flohr
Researcher
Blind Hearing
WCAG 2.1 Level A

Written and researched for humans by humans

Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments: 0
Your entire domain
Get detailed instructions on how to resolve every accessibility issue on your website

Web accessibility standards state that each page shouldn’t have more than one contentinfo landmark.

Why It Matters

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.

Fixing the Issue

Developers should ensure a document has no more than one contentinfo landmark.

Good Code Example

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.

Code example
<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

Bad Code Example

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.

Code example
<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