WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Glossary Tool Tips

for

From: Bryan Garaventa
Date: Apr 11, 2012 4:02PM

Hi,
How about this?

Set the word/phrase as a triggering link, that has the events 'click' and
'mouseover', both will activate the following:
Insert a div just after the triggering link in the DOM so it appears inline.
The div can be styled like whatever you like, a tooltip, bubble, spaceship,
whatever.
E.G. <div class="whatever" aria-live="assertive"></div>
Within the div, insert the text you want so that it's announced using ARIA.
Then append a hidden Close link at the end so that only screen reader users
can see and arrow to it. Set a 'focus' handler on the hidden Close link so
it appears if it receives keyboard focus, but is hidden otherwise.
Then put a 'mouseout' handler on the div to dismiss it.
When closed, set focus back to the triggering element.

That should do the trick regardless whether it's a popup, extended tooltip,
or whatever.


----- Original Message -----
From: "David Ashleydale" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Wednesday, April 11, 2012 2:35 PM
Subject: Re: [WebAIM] Glossary Tool Tips


> Hmm... I guess I was talking about a popup originally then.
>
> What would you say is the semantic difference between a tooltip and a
> popup? Why would you use one instead of the other?
>
> I was thinking about things like glossary terms where some users will want
> to read it and some won't. I don't want to force non mouse users to *have*
> to read them -- they should be able to take some action, such as pressing
> Enter, to indicate that they want to read it.
>
> David
>
> On Wednesday, April 11, 2012, Jared Smith wrote:
>
>> On Wed, Apr 11, 2012 at 2:25 PM, Birkir R. Gunnarsson wrote:
>> > Is there an example of such on that page
>>
>> The first link in the content area has a tooltip. The link text is
>> "Tooltips" and the tooltip text is "That's what this widget is".
>>
>> > Do I need to activate a link with enter to see its tooltip (my
>> > understanding is that tooltip is totally separate from an activation,
>> > so activating the link will take me to the link's target and I will
>> > never see the actual tooltip in that case).
>>
>> No, the tooltip will be read by the screen reader when the link text
>> is read. It will be read whether the link is focused via Tab or if
>> just reading through the text of the page (via arrow keys, etc.). In
>> some ways, the screen reader treats it as a parenthetical at the end
>> of the link text. This really is the only suitable option because, as
>> you note, you can't have Enter activate the tooltip and also activate
>> the function of the link. Additionally, this allows accessible
>> tooltips on things other than tabable elements (links and form
>> controls).
>>
>> If you want something to display when the link is activated, this is
>> called a popup (and can be identified on the link with aria-haspopup).
>> In short, tooltips should always read with the element to which they
>> are associated, whereas popups require activation on a focusable
>> element.
>>
>> Another significant issue with tooltips in general is that they can't
>> be accessed via standard touch screen interactions except, perhaps,
>> when focus is set in a form control. Hover is dead on mobile devices!
>>
>> > You may want to indicate the presence of
>> > tooltips somehow
>>
>> This is a bit tricky. There's no ARIA markup to indicate that an
>> element has a tooltip. The tooltip itself is given role="tooltip", but
>> screen reader don't do anything special based on this information.
>> Conceivably they could identify or read the tooltip text differently
>> than the link text.
>>
>> Jared
>> >> >> >>
> > >