E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 10 (In chronological order)

From: David Ashleydale
Date: Wed, Apr 11 2012 1:25PM
Subject: Glossary Tool Tips
No previous message | Next message →

Hi,

I've received a design request to make "glossary tool tips" that open in a
layer above a link when a mouse user hovers over the link, but they don't
want a "close" link in the layer (like an "X" in the upper right corner).
They are saying that mouse users can just hover over the link, see the
glossary tool tip, and then move off the link to make it go away. There is
no need for a close link in that case.

I explained to them that non-mouse users will need to hit Enter on the link
in order to display the tool tip and that they will need a way to close it
again. But they are asking if non-mouse users could just hit Tab to move
away from the link, thereby closing the tool tip, or just hit Escape to
close it. They think it will look like "sloppy" design to mouse users to
see a close link on the tool tips, since all they need to do is move the
cursor away.

My concern is that, without an explicit close link, non-mouse users will
just have to guess how to close the glossary layer.

My question: Am I over-thinking the need for the close link? Will most
non-mouse users easily figure out how to close the layer if we code it to
close on Tab and Escape? We could even code it to close if the user hits
Enter again -- kind of like a toggle.

Thanks for your thoughts!

David

From: Jared Smith
Date: Wed, Apr 11 2012 1:49PM
Subject: Re: Glossary Tool Tips
← Previous message | Next message →

I'd follow the implementation found at
http://hanshillen.github.com/jqtest/#goto_tooltip Have the tooltips
open when the link is focused, point to it with aria-describedby, and
have the tooltip disappear on Tab and Esc.

Jared

From: Birkir R. Gunnarsson
Date: Wed, Apr 11 2012 2:25PM
Subject: Re: Glossary Tool Tips
← Previous message | Next message →

Hi guys

In the page Jared referred to I click on "ooltip". When I activate the
form field for "age" Jaws reads the tooltip (we only want your age for
statistical purposes).
This is all fine and good for edit fields, but what if the tooltip is
tied to an actual link. Is there an example of such on that page (I
don't see it, I found no other tooltip on the page than the one tied
to the form field).
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).
This implimentation will also not work if users are loooking at the
page with their arrow keys as opposed to tab, so user may not be aware
of the fact there is a tooltip there in the first place (admittedly
just screen reader users). You may want to indicate the presence of
tooltips somehow e.g. with a hidden heading or text on top of the
page, so SR users will know to check for them.

BR
-B


On 4/11/12, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
> I'd follow the implementation found at
> http://hanshillen.github.com/jqtest/#goto_tooltip Have the tooltips
> open when the link is focused, point to it with aria-describedby, and
> have the tooltip disappear on Tab and Esc.
>
> Jared
> > > >

From: Jared Smith
Date: Wed, Apr 11 2012 3:22PM
Subject: Re: Glossary Tool Tips
← Previous message | Next message →

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

From: David Ashleydale
Date: Wed, Apr 11 2012 3:35PM
Subject: Re: Glossary Tool Tips
← Previous message | Next message →

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
> > > >

From: Jared Smith
Date: Wed, Apr 11 2012 3:55PM
Subject: Re: Glossary Tool Tips
← Previous message | Next message →

On Wed, Apr 11, 2012 at 3:35 PM, David Ashleydale wrote:
> Hmm... I guess I was talking about a popup originally then.

Yes, if it requires user activation, then it's a popup, at least
that's how ARIA defines them... kind of.

> What would you say is the semantic difference between a tooltip and a
> popup? Why would you use one instead of the other?

There are no real semantics involved in either, the difference is in
the interaction. Again, tooltips don't require an activation and are
always read in the context of their associated element. Popups require
an activation to be displayed or read.

> they should be able to take some action, such as pressing
> Enter, to indicate that they want to read it.

Interestingly, ARIA does not have a design pattern or markup for such
a thing. I'm not sure why because these are very common.

You'd most likely add aria-haspopup to the link to indicate to the
user that it's not a standard link and that it has a popup. When
activated focus should be set to the popup dialog. The functionality
from that point is really up to you. Again, there's no real ARIA
guidance here.

One could treat the popup as a modal dialog wherein the user must
press Esc or activate "close" to hide the dialog and set focus back to
the original link. Or it could be programmed so that when the dialog
loses focus, focus is set back to the next most logical element in the
page. In this case, it's best to provide the popup dialog element in
the markup immediately after the link that opens it. This way if the
user simply begins reading the dialog and continues on, the screen
reader will continue immediately after the link/dialog content.

Hopefully that helps a bit.

Jared

From: Bryan Garaventa
Date: Wed, Apr 11 2012 4:02PM
Subject: Re: Glossary Tool Tips
← Previous message | Next message →

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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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
>> >> >> >>
> > >

From: Ryan Hemphill
Date: Wed, Apr 11 2012 6:49PM
Subject: Re: Glossary Tool Tips
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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.

From: Bryan Garaventa
Date: Wed, Apr 11 2012 10:27PM
Subject: Re: Glossary Tool Tips
← Previous message | Next message →

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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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.
> > >

From: Claudia.Case
Date: Thu, Apr 12 2012 9:43AM
Subject: Re: Glossary Tool Tips
← Previous message | No next message

David,
Take a look at WAI-ARIA Authoring Practices tooltip design pattern: http://www.w3.org/WAI/PF/aria-practices/#tooltip

My understanding is that keyboard interaction for ARIA widgets is based on standard OS keyboarding. The design pattern also describes how to dismiss tooltips that appear on focus (without user action) as well as the more common type where the user decides when to see the tooltip.


claudia