W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > April to June 2012

RE: Should role="contentinfo" be added on a footer or a p element?

From: Léonie Watson <lwatson@nomensa.com>
Date: Tue, 26 Jun 2012 16:03:47 +0100
To: Steve Faulkner <faulkner.steve@gmail.com>, Ian Yang <ian.html@gmail.com>
CC: "w3c-wai-ig@w3.org" <w3c-wai-ig@w3.org>
Message-ID: <D4219A0ECCAE794C9ED7DC6F5A4C0CD537B404D912@jupiter.intranet.nomensa.com>
>> On ARIA demonstration websites, role="contentinfo" is usually added

>> on a footer element.

>>

>> However, footers in modern web

>> design<http://www.smashingmagazine.com/2008/04/08/footers-in-modern-w

>> eb-design-creative-examples-and-ideas/>can

>> be creative so that they can also contain things like supplementary

>> navigation links, social website links, or even a newsletter form.



If you apply the role of contentinfo to the footer element, screen readers that support both HTML5 and ARIA will report the landmark only once. If you apply the role to another element and also have a footer element, the landmark will be reported twice.



Generally speaking this isn't too much of a problem. If the contentinfo role is applied to an element that's a child of the footer, it can cause unnescessary duplication though. Effectively the landmark is reported twice in quick succession.



In case it's helpful, I wrote about this (in a slightly different context):



Léonie.





--

Nomensa - humanising technology



Léonie Watson, Director of Accessibility

tel: +44 (0)117 929 7333

mob: +44 (0)792 116 8551

twitter: @we_are_Nomensa @LeonieWatson



Nomensa Email Disclaimer: http://www.nomensa.com/email-disclaimer





--
Nomensa - humanising technology

Léonie Watson, Director of Accessibility
tel: +44 (0)117 929 7333
mob: +44 (0)792 116 8551
twitter: @we_are_Nomensa @LeonieWatson

Nomensa Email Disclaimer: http://www.nomensa.com/email-disclaimer
From: Steve Faulkner [mailto:faulkner.steve@gmail.com]
Sent: 26 June 2012 10:32
To: Ian Yang
Cc: w3c-wai-ig@w3.org
Subject: Re: Should role="contentinfo" be added on a footer or a p element?

Hi Yang,

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.

I would further suggest that use of role=group on footer elements contained in section or article elements would be the way to go as it aligns the semantics across browsers.


regards
stevef
On 26 June 2012 05:47, Ian Yang <ian.html@gmail.com<mailto:ian.html@gmail.com>> wrote:
Hi everyone,

On ARIA demonstration websites, role="contentinfo" is usually added on a footer element.

However, footers in modern web design<http://www.smashingmagazine.com/2008/04/08/footers-in-modern-web-design-creative-examples-and-ideas/> 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>



Kind Regards,
Ian Yang



--
with regards

Steve Faulkner
Technical Director - TPG

www.paciellogroup.com<http://www.paciellogroup.com> | www.HTML5accessibility.com<http://www.HTML5accessibility.com> | www.twitter.com/stevefaulkner<http://www.twitter.com/stevefaulkner>
HTML5: Techniques for providing useful text alternatives - dev.w3.org/html5/alt-techniques/<http://dev.w3.org/html5/alt-techniques/>
Web Accessibility Toolbar - www.paciellogroup.com/resources/wat-ie-about.html
<http://www.paciellogroup.com/resources/wat-ie-about.html>
Received on Tuesday, 26 June 2012 15:04:56 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 26 June 2012 15:04:59 GMT