On ARIA demonstration websites, role="contentinfo"
is usually added on footer
element.
However, footers in modern web design can be creative so that they can also contain things like supplementary navigation links, social website links, or even a newsletter form.
Taking the following codes of footer for example. Should role="contentinfo"
be added on the footer
or the p
element?
<footer>
<nav>
<ul>
........
........
........
........
........
</ul>
</nav>
<form>
........
........
........
</form>
<p>© 2012 Website.com. All rights reserved.</p>
</footer>
EDIT: I had asked this question by utilizing the W3C ARIA mailing list, and Steve Faulkner, a member of W3C HTML Working Group has replied. The following is his suggestion:
I would also take into account how browsers map the footer element to accessibility APIs.
In Firefox the footer is mapped to ARIA role=contentinfo
In Webkit/safari/chrome the footer is mapped to ARIA role=group if it is contained within a section or article element otherwise it is mapped to role=contentinfo
In IE it is not mappedSo doing this:
<div role="contentinfo">
some content
<footer>some content</footer>
</div>will lead to nested contentinfo landmarks being announced in browsers that already map footer to contentinfo.
I would suggest therefore that adding role=contentinfo to the main footer, not worrying too much about content that you think may not be appropriate being in the footer.
So the suggested approach is adding role="contentinfo"
to the main footer
.
I think it should be on the footer tag in your case.
It is meant to give information about the parent document, so I would use it if your footer elements give a good context of the parent.