WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Icon-only buttons

for

From: Priti Rohra
Date: Jan 21, 2022 12:44AM

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