WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Glossary Tool Tips

for

From: Bryan Garaventa
Date: Apr 11, 2012 10:27PM

No problem :)
If you use a standard A tag, a click handler should do the trick to trigger
the link even when a screen reader isn't running;
you would need to add a dummy href attribute like href="#" to make this
keyboard accessible however. If you wanted to use a non-standard element
like a span tag though, you would need to add both click and keypress
handlers in addition to the attributes tabindex=0 and preferably role=link.
A standard A tag would be more widely supported though.

----- Original Message -----
From: "Ryan Hemphill" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Wednesday, April 11, 2012 5:49 PM
Subject: Re: [WebAIM] Glossary Tool Tips


>I like Bryan's solution. In fact, I'm going to write that down and see
> where I can leverage that myself.
>
> Devil's advocate here -->
>
> This doesn't seem to account for the sighted keyboard user ... this group
> wouldn't use a click or a mouseover. Where do they fit into the mix?
>
>
>
> - Ryan
>
> On Wed, Apr 11, 2012 at 6:02 PM, Bryan Garaventa <
> <EMAIL REMOVED> > wrote:
>
>> 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
>> >> >> >> >> >> >> >>
>> > >> > >> > >>
>> >> >> >>
>
>
>
> --
>
>
>
> Shipping is a Feature...Perhaps the Most Important Feature.
> > >