Posted on Leave a comment

Accessible SVG Icons With Inline Sprites

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

<button type="button">   Menu   <svg class="svg-icon"      role="img"      height="10"      width="10"      viewBox="0 0 10 10"      aria-hidden="true"      focusable="false">      <path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"/>     </svg> </button>

Notes:

  • It’s not the <svg> itself that is interactive — it’s wrapped in a <button> 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

Comments

comments

Leave a Reply

Your email address will not be published. Required fields are marked *