Accessibility
Document must not have more than one contentinfo landmark
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.
Fixing 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 rolecontentinfo" 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>