WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tooltip for non-actionable icons

for

From: Birkir R. Gunnarsson
Date: Feb 21, 2023 4:37AM

Use plain text alongside the icon the first time you use it. Think
about why you are using the icon and if users will actually understand
it.

If you must, you can make the icon keyboard focusable, it has a
function, (to display the tooltip). You can add role="button" and
aria-roledescription="tooltip" for the benefit of a screen reader
user, this will cause the screen reader to announce the word "tooltip"
as you focus it (adding role="tooltip" on the tooltip text does
nothing, at least not in my last testing, but aria-roledescription has
decent support).


On 2/21/23, megha patangi < <EMAIL REMOVED> > wrote:
> Hello all,
> This is a question with respect to the requirement of sighted keyboard
> users.
> We have a non-actionable icon and we have provided tooltip explaining
> what the icon is about, and the tooltip appears on hover.
> for sighted keyboard users too we wanted to have this tooltip appear
> on focus, but to achieve this we need to make the icon focusable.
>
> Challenges:
> 1. if we make the icon focusable, then it violates that
> "non-interactive item receives tab stop"
> 2. if we don't make it focusable, then there is no way for keyboard
> users to access the tooltip, which violates that "tooltip accessible
> for mouse users but not for keyboard, or dragon users"
>
> What can be better done with this, which is not violation and gives
> equitable experience.
>
> Regards,
> Megha
> > > > >


--
Work hard. Have fun. Make history.