WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Glossary Tool Tips

for

From: Ryan Hemphill
Date: Apr 11, 2012 6:49PM

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.