WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Icon-only buttons

for

From: David Farough
Date: Jan 21, 2022 6:52AM

Another point is to insure that the icon would be recognized by most people and that the alt text is an accurate description of the icon .
At least this way a speech dictation user would be able to accurately tell the software what to click on.

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Priti Rohra
Sent: Friday, January 21, 2022 2:45 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] [EXTERNAL] Re: Icon-only buttons

To add to the helpful list of practices for icon buttons shared by
Birkir earlier, will like to add couple of more points:
- Make sure that the focus indicator is visible for the icon buttons
that are not structured using native HTML button or input elements.
- Make sure the touch target size for the interactive icons is 44/44
CSS pixels. Even though this is required at WCAG 2.1 at Level AAA
(2.5.5) it is recommended to adhere to this requirement as it is
pretty helpful for mobile users.
And yes its good to have scalable icons and thats why Birkir
recommended icons created as <svg>.

Always BPositive!
Priti Rohra


On 1/21/22, Alan Zaitchik < <EMAIL REMOVED> > wrote:
> Geetha,
> I don't know if you care to notify the user of a change the user
> himself/herself might make by liking or commenting or whatever, but if so
> you could use aria-labelledby and point to a counter that is in a “polite”
> live area, visible or off-screen. So if the user clicks a like icon and
> changes the counter, from 100 to 101, say, they would hear that there are
> now 101 likes as a sort of confirmation message. I think it's always good to
> communicate status or result of a button action in a case like this. There
> is no detectable feedback from just changing ALT text.
> The above suggestion would not be good if the count can be changed
> asynchronously by external events not triggered by the user, and it would
> not even be relevant if the counts were just set on page load and not
> subject to change at all.
> But even in those cases, I might still prefer to use aria-labelledby (
> without the aria-live.) Although I won't try to strongly defend the
> following “feeling”, I think it's a better coding practice to update a text
> node than an an attribute like ALT. This consideration would apply even if
> the icons are read only for the use case you have in mind.
>
> A
>
>> On Jan 20, 2022, at 08:53, Geethavani.Shamanna
>> < <EMAIL REMOVED> > wrote:
>>
>> Interesting. Should icons be presented as buttons even if they are not
>> interactive?
>>
>> Also, I am currently testing a web page that contains icons titled
>> 'Contribution-Count-Icon', 'Like-Count-Icon', and so on. The developers
>> have conveniently used the original name of the icon in the alt text.
>> Above each of these icons there are numbers such as 0, 58, and so on,
>> based on the number of likes or comments. It would be ideal if the alt
>> text for these icons can also reflect this number. For example, 'Number of
>> likes: 58'. However, since the number is dynamic, what is the best way to
>> incorporate this into the alt text? Finally, should these icons be
>> presented as buttons, although they cannot be clicked on?
>>
>> Many thanks.
>> Geetha
> > > > >