Frage

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 mapped

So 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.

War es hilfreich?

Lösung

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

Andere Tipps

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.

I would go with the <p> element. I mean, the point of HTML is to give context to your text. So give appropriate context by doing appropriate markup.

Give the role to the most appropriate element, it is not a limited attribute to footer elements.

It is redundant information as the semantics are already conveyed through the HTML5 specs https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html#the_difference_between_html5_and_aria

Generally you can skip the ARIA roles if they overlap with the semantic understanding of the HTML5 element.

I think this is right, but needs testing from screen readers to determine that this is accurate.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top