This is a great look at accessible SVG markup patterns by Marco Hengstenberg. Here’s the ideal example:
- It’s not the
itself that is interactive — it’s wrapped in a
.svg-iconclass has some nice trickery, like em-based sizing to match the size of the text it’s next to, and
currentColorto match the color.
- Since real text is next to it, the icon can be safely ignored via
aria-hidden="true". If you need an icon-only button, you can wrap that text in an accessibily-friendly
focusable="false"attribute solves an IE 11 bug.
Plus a handy Pen to reference all the patterns.
CSS Tricks Go to Source
Powered by WPeMatico