Marco Hengstenberg avatar Marco Hengstenberg

Accessible SVG Icons with Inline Sprites

Screenshot of “Accessible SVG Icons with Inline Sprites”

Standing on their own, icons can be misinterpreted […]. The most important issue though: they lack text. Text is the most accessible format for information on the web. Screen readers understand text best and the same applies to most assistive technology, such as translation apps and Braille displays. So, if we have anything on our web page that’s not text — like icons — we must add text that gives our users the same information. Otherwise we could exclude people from understanding our interfaces.

I thought having aria-label in my sprite's <symbol> was enough, but it looks like the aria-label should be on the SVG with the <use> tag instead.