WebAIM - Web Accessibility In Mind

E-mail List Archives

Is it okay to add role="tooltip" to static elements?

for

From: Bryan Garaventa
Date: Jun 27, 2012 8:16PM

"In IE if you use aria-labelledby with multiple id references or
aria-describedby with single or multiple id references, the referenced
elements must be what Microsoft terms as accessible HTML elements. So
tabindex=-1 would have to be added to the <p"

I haven't seen this to be the case. For example, on the page at
http://whatsock.com/modules/carousel_from_xml_module/demo.htm
When you click the Generate Wizard from XML button, it opens a wizard
dialog. All of the form fields use aria-labelledby, and the first field
references two IDs. Neither of the label divs have tabindex=-1, and the
multiple labels appear to be reading without a problem in IE.

> From: Steve Faulkner [mailto: <EMAIL REMOVED> ]
> Sent: Wednesday, 27 June 2012 11:53 PM
> To: Ian Yang
> Cc: <EMAIL REMOVED>
> Subject: Re: Is it okay to add role="tooltip" to static elements?
>
>
>
> Hi Ian,
>
> The text is not a tooltip, tooltips have particular properties associated
> with them: http://www.w3.org/WAI/PF/aria-practices/#tooltip
>
> Note:
>
> In IE if you use aria-labelledby with multiple id references or
> aria-describedby with single or multiple id references, the referenced
> elements must be what Microsoft terms as accessible HTML elements. So
> tabindex=-1 would have to be added to the <p> refer to Making Non
> accessible
> Elements Accessible
>
>
> regards
> Stevef
>
> On 27 June 2012 14:24, Ian Yang < <EMAIL REMOVED> > wrote:
>
> Hi Steve,
>
> Yes, the example uses aria-describedby to associate the static < p >
> element and the < input > field so the information will be announced
> when the field receives focus.
>
> The issue which I'm trying to figure out is if adding role="tooltip"
> to the static < p > element has bad effects on assistive technologies.
>
> Regards,
> Ian
>
> 2012/6/27 Steve Faulkner < <EMAIL REMOVED> >:
>
>> Hi Ian,
>>
>> I suggest its better to include the text within the label for the form
>> field
>> so the information will be announced when the field recieves focus:
>>
>> examples and details here:
>> http://www.html5accessibility.com/tests/mulitple-labels.html
>>
>> regards
>> steve
>>
>>
>> On 27 June 2012 12:50, Ian Yang < <EMAIL REMOVED> > wrote:
>>>
>>> Hi everyone,
>>>
>>> Please take a look at this image (
>>>
>>>
>>> http://www.lessfussdesign.com/blog/http://www.lessfussdesign.com/images/blog/form-screen-2009-08-10.gif
>>> ) which is taken from this blog page (
>>>
>>>
>>> http://www.lessfussdesign.com/blog/2010/08/using-aria-describedby-for-form-help-text/
>>> ).
>>>
>>> The image shows that there is a static description paragraph (< p >
>>> element) below the password input field. In that case, is it okay to
>>> add ARIA role="tooltip" to the static < p > element?
>>>
>>> In most web designs, tooltips are often designed as "popups" which are
>>> triggered by mouse hover. However, if I understand it correctly,
>>> "tooltip" literally means "tip of tool" and doesn't imply that a
>>> tooltip must be a "popup" thing. So, can I add role="tooltip" to
>>> elements which can be considered as "tip of tool", even if they are
>>> static elements? (Just like the example above) By doing so, I feel
>>> they are markup'ed more meaningfully, and we also get the benefit of
>>> having styling hooks.
>>>
>>> I'm not sure whether adding role="tooltip" to static elements has
>>> negative effects to assistive technologies or not. Is this idea
>>> appropriate or inappropriate?
>>>
>>>
>>> Kind Regards,
>>> Ian
>>>
>>
>>
>>
>> --
>> with regards
>>
>> Steve Faulkner
>> Technical Director - TPG
>>
>> www.paciellogroup.com | www.HTML5accessibility.com |
>> www.twitter.com/stevefaulkner
>> HTML5: Techniques for providing useful text alternatives -
>> dev.w3.org/html5/alt-techniques/
>> Web Accessibility Toolbar -
>> www.paciellogroup.com/resources/wat-ie-about.html
>>
>
>
>
>
> --
> with regards
>
> Steve Faulkner
> Technical Director - TPG
>
> www.paciellogroup.com | www.HTML5accessibility.com |
> www.twitter.com/stevefaulkner
> HTML5: Techniques for providing useful text alternatives -
> dev.w3.org/html5/alt-techniques/
> Web Accessibility Toolbar -
> www.paciellogroup.com/resources/wat-ie-about.html