- How do I make an icon button accessible?
- Are icons good for accessibility?
- Do icons need labels for accessibility?
How do I make an icon button accessible?
Enhance icon with text
This is the easiest way to make your icon links (and buttons) accessible. Just place rock-solid copy next to the icon within the link. VoiceOver will read link, home . ChromeVox, on the other hand, will read home, internal link and Narrator will read Home, link, value: URL comma read-only .
Are icons good for accessibility?
Incorporating accessibility into your icons is vital for helping your visitors understand your website. They should be easy to see, big enough to interact with, and be able to be understood either in their own right or with accompanying text.
Do icons need labels for accessibility?
While it's a good UX idea, it's not required. To add that there is no need for labels on icons but 1.1. 1 Non-text Content requires that icon has a name, which can be for example alt text and can be visually hidden.