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 Article — Permalink

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

from CSS-Tricks https://ift.tt/2Q8KuVs
via IFTTT