WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tooltip for non-actionable icons

for

From: Birkir R. Gunnarsson
Date: Feb 21, 2023 6:18AM

WCAG oddly does not really say anything explicitly about this, not in
the level A/AA realm anyway.
Alt text for those who can't see the icon, equal access for keyboard
only users (primarily for screen reader users and people with mobility
impairments), and requirements about semantics (though semantics
probably does not really apply here).
People with cognitive impairments can rely on alt text and display it
alongside the icons, if browsers or browser add-ons are available to
do that.
So iconography is not directly addressed by WCAG.

On 2/21/23, Karen McCall < <EMAIL REMOVED> > wrote:
> 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.
> > > https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.webaim.org%2F&data%7C01%7C%7C0705be49831c4959995d08db140019f5%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638125762911146526%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=VdO4Kw4Y%2B7%2Fl8%2F7%2Bk240fUrzWWCRxUJA6nsJsNaAx9I%3D&reserved=0
> List archives at
> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&data%7C01%7C%7C0705be49831c4959995d08db140019f5%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638125762911146526%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=QYCqcyVTs%2Fy8ts%2Bv3gstVE65IRRuMnoX7TAwU1oZQuI%3D&reserved=0
> > > > > >


--
Work hard. Have fun. Make history.