E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Tooltip for non-actionable icons

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

From: megha patangi
Date: Tue, Feb 21 2023 3:18AM
Subject: Tooltip for non-actionable icons
No previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Tue, Feb 21 2023 4:37AM
Subject: Re: Tooltip for non-actionable icons
← Previous message | Next message →

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

From: Karen McCall
Date: Tue, Feb 21 2023 6:11AM
Subject: Re: Tooltip for non-actionable icons
← Previous message | Next message →

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 ADDRESS REMOVED = > On Behalf Of Birkir R. Gunnarsson
Sent: Tuesday, February 21, 2023 6:38 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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.

From: Birkir R. Gunnarsson
Date: Tue, Feb 21 2023 6:18AM
Subject: Re: Tooltip for non-actionable icons
← Previous message | No next message

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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Birkir R. Gunnarsson
> Sent: Tuesday, February 21, 2023 6:38 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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.