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.
https://www.w3.org/TR/wai-aria/#contentinfo
As of now there is no definitive right answer.
If you go by the spec: http://www.w3.org/TR/wai-aria/roles#contentinfo, contentinfo
is described as:
"A large perceivable region that contains information about the parent document. Examples of information included in this region of the page are copyrights and links to privacy statements."
So, in this case it should be placed on your <p>
tag.
However, pretend you are the user that is utilizing these landmarks. If everyone places the role="contentinfo"
on the footer
, then that is what the user expects. The user doesn't care what a "spec" says, they just want a consistent experience as they browse from website to website. They are probably expecting footer links and such to be in the contentinfo
section, because that's how it is implemented on many sites, and as you mentioned it is the recommended way per many accessibility experts.
I prefer to cater to the user, and therefore I apply it on the footer
element, however I keep in the back of my mind that this goes against the spec (or at least my interpretation of it) and that implementation of this might change as browsers and other accessible technologies begin implementing accessibility in a more consistent manner.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With