Do you need an ICON ONLY button without screwing up the accessibility?
The first consideration is: do you really? If you can, having text next to your icons is proven over and over again to be the most accessible and clearest UX (see Apple’s latest blunder). But if you need to (and I get it, sometimes you need to), Sara Soueidan and Scott O’Hara have a pair of articles that nicely lay out all the options and present actual research on this topic.
- Sara Soueidan: Accessible Icon Buttons
- Scott O’Hara: Contextually Marking up accessible images and SVGs
If you just want to be told what to do, I’d go for the just use some text in the button approach:
<button aria-expanded="false" id="menu-trigger">
<svg viewBox="0 0 32 32" width="32px" height="32px"
aria-hidden="true" focusable="false">
<!-- svg content -->
</svg>
Menu
</button>Sara says There is no One Way to Rule Them All, but it does seem like you really need to use actual text inside that button and either hide it or override it somehow. SVG alone has no rock solid way to provide an accessible name to a button or link.
Funny how long this has been a tricky pattern to get right.
The post Do you need an ICON ONLY button without screwing up the accessibility? appeared first on CSS-Tricks.
