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