WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tooltip for non-actionable icons

for

From: Karen McCall
Date: Feb 21, 2023 6:11AM

I'd keep in mind those with information processing issues for whom icons, symbols and shapes can be confusing. This information processing issue isn't confined to a single instance of a symbol or icon.

Not sure how WCAG deals with this type of accessibility support. I mostly deal with documents.

Cheers, Karen

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Birkir R. Gunnarsson
Sent: Tuesday, February 21, 2023 6:38 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Tooltip for non-actionable icons

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
> > > https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.w
> ebaim.org%2F&data%7C01%7C%7C0705be49831c4959995d08db140019f5%7C84df
> 9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638125762911146526%7CUnknown%7C
> TWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVC
> I6Mn0%3D%7C3000%7C%7C%7C&sdata=VdO4Kw4Y%2B7%2Fl8%2F7%2Bk240fUrzWWCRxUJ
> A6nsJsNaAx9I%3D&reserved=0 List archives at
> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim
> .org%2Fdiscussion%2Farchives&data%7C01%7C%7C0705be49831c4959995d08d
> b140019f5%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638125762911146
> 526%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTi
> I6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=QYCqcyVTs%2Fy8ts%2Bv3gs
> tVE65IRRuMnoX7TAwU1oZQuI%3D&reserved=0
> >


--
Work hard. Have fun. Make history.