WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: tooltips on tap

for

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

From: Sonja Weckenmann
Date: Sat, Nov 06 2021 9:54AM
Subject: tooltips on tap
No previous message | Next message →

Hi,

I'm a little confused about whether or not custom tooltips can work for
touch screen users (even knowing that tooltips are not recommended and
knowing there is no problem with "toggletips").

I've read different statements:

- They are inaccessible to touch devices when attached to buttons or
links. This is because hover is unavailable on a touch device, and it is
also impossible to focus a button or link without activating it.
- Tooltips in general are a bit quirky on touch devices, since there's
no "hovering".
- So far it simply doesn't work so well for touch screen users because
the focus and active states happen simultaneously. In practice, this
means you'll see the tooltip, but only as the button is being pressed.

I've seen examples from Scott O'Hara, displaying the tooltips on tap, so
it seems to me that it is possible
(http://scottaohara.github.io/a11y_tooltips/).

Could anyone explain this to me in a little more detail? Unfortunately I
am not so much a kind of a JavaScript expert.

Thanks a lot.
Sonja

From: Jerra Strong
Date: Sat, Nov 06 2021 9:57AM
Subject: Re: tooltips on tap
← Previous message | Next message →

At a recent discussion about this with ARIA group, we discussed showing the
tooltip on touch start and dismissing it on touch end. This way you *could*
discover and see it on mobile, even though there are still all the problems
with it you mentioned.

On Sat, Nov 6, 2021 at 8:54 AM Sonja Weckenmann < = EMAIL ADDRESS REMOVED = > wrote:

> Hi,
>
> I'm a little confused about whether or not custom tooltips can work for
> touch screen users (even knowing that tooltips are not recommended and
> knowing there is no problem with "toggletips").
>
> I've read different statements:
>
> - They are inaccessible to touch devices when attached to buttons or
> links. This is because hover is unavailable on a touch device, and it is
> also impossible to focus a button or link without activating it.
> - Tooltips in general are a bit quirky on touch devices, since there's
> no "hovering".
> - So far it simply doesn't work so well for touch screen users because
> the focus and active states happen simultaneously. In practice, this
> means you'll see the tooltip, but only as the button is being pressed.
>
> I've seen examples from Scott O'Hara, displaying the tooltips on tap, so
> it seems to me that it is possible
> (http://scottaohara.github.io/a11y_tooltips/).
>
> Could anyone explain this to me in a little more detail? Unfortunately I
> am not so much a kind of a JavaScript expert.
>
> Thanks a lot.
> Sonja
> > > > >

From: Tim Harshbarger
Date: Thu, Nov 11 2021 7:08AM
Subject: Re: tooltips on tap
← Previous message | Next message →

I am sure someone else will correct me if I miss something.

Any user interface element that relies on focus or hover to work will not work on touch devices. So the only way tooltips will work on a mobile device is if you use some method for triggering the tooltip that does not rely on those events.

I wasn't able to spend as much as I would like to read the article. It is a good article, but I think it is just focused on desktop. It didn't look like any of the techniques I read would work on mobile because it looks like they all relied on focus or hover.

I hope that helps?
Thanks!
Tim
Tim Harshbarger
Senior Accessibility Consultant
Deque Systems

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Sonja Weckenmann
Sent: Saturday, November 6, 2021 10:54 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] tooltips on tap

Hi,

I'm a little confused about whether or not custom tooltips can work for touch screen users (even knowing that tooltips are not recommended and knowing there is no problem with "toggletips").

I've read different statements:

- They are inaccessible to touch devices when attached to buttons or links. This is because hover is unavailable on a touch device, and it is also impossible to focus a button or link without activating it.
- Tooltips in general are a bit quirky on touch devices, since there's no "hovering".
- So far it simply doesn't work so well for touch screen users because the focus and active states happen simultaneously. In practice, this means you'll see the tooltip, but only as the button is being pressed.

I've seen examples from Scott O'Hara, displaying the tooltips on tap, so it seems to me that it is possible (http://scottaohara.github.io/a11y_tooltips/).

Could anyone explain this to me in a little more detail? Unfortunately I am not so much a kind of a JavaScript expert.

Thanks a lot.
Sonja

From: Patrick H. Lauke
Date: Thu, Nov 11 2021 7:16AM
Subject: Re: tooltips on tap
← Previous message | No next message

On 11/11/2021 14:08, Tim Harshbarger wrote:
> I am sure someone else will correct me if I miss something.

Not correct, but complement *smile*

> Any user interface element that relies on focus or hover to work will not work on touch devices.

Pedantic perhaps, but I'll note that even on touch devices, you can have
paired keyboard and mice, and even a stylus/pen that is hover-aware, so
these modalities will still exist and can be planned for. But yes,
assuming the touch screen is the primary and most commonly used input
method on smartphones/tablet nonetheless, it's definitely not something
you should rely on as an author (but can add awareness/support in your
product as a bonus).

Also, regarding focus, it depends if the activation of a control/button
itself immediately triggers something or not. Once you tap a button, for
instance, it will have focus...so you can theoretically hang
functionality off of that - so you *can* for instance make something a
two-step process: first tap on a button shows whatever the focus
functionality is, and only a second tap on the same button will actually
trigger any kind of action. (same applies to mouse, incidentally, even
on desktop)

But of course, that's more of a patch, rather than a solid interaction
sequence (forcing users to tap twice to actually do something).

> So the only way tooltips will work on a mobile device is if you use some method for triggering the tooltip that does not rely on those events.

You *could* at a stretch implement the above-mentioned two-step. But
much more solid approach is indeed not to rely at all on tooltips and to
make the interface obvious without the need for tooltips at all
(benefits all users, even on mouse/keyboard platforms, incidentally).

Related to the topic:
https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke