WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Icon-only buttons

for

From: Mark Magennis
Date: Jan 21, 2022 7:09AM

You raise a good point David - ensuring the icon is recognizable. If you have a printer icon button with the name "print", a voice activation user can say "click print". But they will need to guess that its name is "print". I would say it's guessable that a print icon's name is "print" so it is okay to have that as an icon-only button with no visible text. But how many icons are there with names that are guessable, or guessable at two or three attempts? Do you think the following are guessable?

X icon - Close
Pencil icon - Edit
Printer icon - Print
Trash can icon - Delete or Remove
Square with arrow pointing out of the top right corner - Opens in a new tab
Loudspeaker - Volume or Mute
Lower case i in a circle - Information
Question mark - Help

I would say most of these are guessable, but are there that many more? Specific domains may have their own sets of standard icons that are guessable I suppose.

Mark

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of David Farough
Sent: 21 January 2022 13:52
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] [EXTERNAL] Re: Icon-only buttons

[You don't often get email from <EMAIL REMOVED> . Learn why this is important at http://aka.ms/LearnAboutSenderIdentification.]

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
> > > archives at http://webaim.org/discussion/archives
> >