WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Icon-only buttons

for

From: Birkir R. Gunnarsson
Date: Jan 20, 2022 3:41AM

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


--
Work hard. Have fun. Make history.