Page must not have more than one contentinfo landmark
Squash more accessibility bugs with axe DevTools Pro
Compliance Data & Impact
Disabilities Affected
- Sighted Keyboard Users
- Blind
- Deafblind
Standard(s)
- Deque Best Practice
How to Fix the Problem
Ensure the document has no more than one contentinfo landmark.
A page SHOULD NOT contain more than one instance of the
contentinfo landmark.
Good Example: One Instance Per Page of 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>Bad Example: Multiple Instances of contentinfo Landmarks
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>Why it Matters
One of the main purposes of landmarks is to allow blind users to quickly find and navigate to the appropriate landmark, so you should keep the total number of landmarks relatively low. If you don't, screen reader users will have to sort through too much extra information to find what they're looking for.
Despite all of the talk about using correct semantic structure for
accessibility, HTML has historically lacked some key semantic markers, such as
the ability to designate sections of the page as the header, navigation, main
content, and footer. With HTML5, these designations are possible, using the
new elements header, nav, main, and
footer. Similar functionality is available using the ARIA
(Accessible Rich Internet Application) attributes role="banner",
role="navigation", role="main" and
role="contentinfo".
JAWS, NVDA, and VoiceOver support the ability to navigate to sections of a web
page using ARIA landmarks. Landmarks provide a more elegant solution to the
problem of providing a way for users to skip to the main content of the web
page. There is no visible alteration to the web design, making it unobtrusive
and invisible. Of course, the fact that this technique is invisible is fine
for blind screen reader users, but not so fine for sighted keyboard users or
screen enlarger users with low vision. In this sense, HTML 5 regions and ARIA
landmarks cannot yet replace the old-fashioned "skip navigation" links.
Browsers still do not have a built-in way to notify users that HTML 5 regions
or ARIA landmarks are present. Screen reader users are the only ones who can
take advantage of them. There is a
Firefox ARIA landmark extension
available, which adds the ability to navigate by landmarks in Firefox, but
this is not a native feature of the browser.
Rule Description
Ensures the page has at most one contentinfo landmark.
The Algorithm (in simple terms)
This rule finds all contentinfo landmarks, filtering out those
who do not map their role, and verifies that there is no more than one.
Resources
Refer to the complete list of axe 3.5 rules.
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: