WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Icon-only buttons

for

From: Geethavani.Shamanna
Date: Jan 20, 2022 6:53AM

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

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Birkir R. Gunnarsson
Sent: 20 January 2022 10:42
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] [EXTERNAL] Re: Icon-only buttons

CAUTION: This mail comes from outside the University. Please consider this before opening attachments, clicking links, or acting on the content.

1. Make sure they are presented as buttons (use a <button> element, an element that has an implicit role of button or add the role="button"
attribute).
2. Make sure they have an accessible name, best to use the aria-label attribute (or the title attribute). The accessible name should describe the function of the button, not the appearance of the icon (e.g. "close" instead of "x") 3. Make sure the icon meets the 3:1 color contrast with the background 4. If not using a proper HTML button element, make sure to code your element to funcion like a button (with keyboard), see the button entry in section 3 of the ARIA Authoring Practices spec

e.g.
<button aria-label="close">
<svg with the icon</svg>
</button>


On 1/20/22, Mark Magennis < <EMAIL REMOVED> > wrote:
> Bear in mind there's also WAG SC 1.4.11 Non-text Contrast which
> requires that icon buttons have a contrast of at least 3:1 against adjacent colors.
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Michael H
> Sent: 20 January 2022 05:02
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: [EXTERNAL] Re: [WebAIM] Icon-only buttons
>
> Thank you for the help/reply Patrick!
>
>> I'm guessing you were wondering if there's any normative requirement
>> to
> have visible descriptions, tooltips, or similar to disambiguate them
> and make them understandable
>
> Exactly! My team was wondering if having icon-only (with accessible
> text) buttons would break any AA standards/rules.
>
> Thanks again for your help!
>
>
>
> On Wed, Jan 19, 2022 at 2:16 PM Patrick H. Lauke
> < <EMAIL REMOVED> >
> wrote:
>
>> On 19/01/2022 21:56, Michael H wrote:
>> > Hello,
>> >
>> > Quick question about interactive icon controls.
>> >
>> > Are there any guidelines (AA and/or AAA?) about icons?
>> >
>> > I quickly get lost in the spec, and was curious if someone could
>> > point me in the right direction.
>> >
>> > I'm curious to know what the a11y guidelines are for icons and
>> descriptive
>> > text.
>>
>> They need a text alternative / the button needs an accessible name,
>> but beyond that there's no additional requirements (I'm guessing you
>> were wondering if there's any normative requirement to have visible
>> descriptions, tooltips, or similar to disambiguate them and make them
>> understandable ... so no, there's no SC for that).
>>
>> P
>> --
>> Patrick H. Lauke
>>
>> https://www.splintered.co.uk/ | https://github.com/patrickhlauke
>> https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
>> twitter: @patrick_h_lauke | skype: patrick_h_lauke
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.