This is a great look at accessible SVG markup patterns by Marco Hengstenberg. Here’s the ideal example:

Notes:

  • It’s not the itself that is interactive — it’s wrapped in a for that.
  • The .svg-icon class has some nice trickery, like em-based sizing to match the size of the text it’s next to, and currentColor to 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 .visually-hidden class.
  • The focusable="false" attribute solves an IE 11 bug.

Plus a handy Pen to reference all the patterns.

Direct Link to ArticlePermalink

The post Accessible SVG Icons With Inline Sprites appeared first on CSS-Tricks.

CSS Tricks Go to Source
Author:

Chris Coyier

Powered by WPeMatico