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.

20 Webmentions

10 likes

1 repost

  1. Patidou avatar

9 replies

  1. Marco Hengstenberg avatar Marco Hengstenberg
    ☺️ Thanks for sharing.
  2. Nicolas Hoizey avatar Nicolas Hoizey
    You're welcome, that's a great article! 👍

    Just a question: 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. Is that true?
  3. Marco Hengstenberg avatar Marco Hengstenberg
    If the label never changes you may as well add it to the <symbol>. It depends on the use-case though. Re-using the icon in different contexts may require changing the text in the label (link or button context compared to decoration for example).
  4. Nicolas Hoizey avatar Nicolas Hoizey
    It might indeed be necessary to have different labels.

    If I put a "default" label in the symbol, will it be overridden by a label in the "parent" SVG?
  5. Stéphane Deschamps avatar Stéphane Deschamps
    @nhoizey Idem je mets les infos d'ARIA sur le SVG, pas sur ses enfants (après potassage de la littérature, Léonie Watson en tête).
  6. Nicolas Hoizey avatar Nicolas Hoizey
    @accessiblestef quand tu dis « enfant », tu penses au `<symbol>` visé par le `<use>` ?D'après l'auteur et Sara Soueidan, on peu laisser le `aria-labelledby` dans le `<symbol>`, il sera hérité par défaut, et remplacé par un `aria-labelledby` posé sur le SVG « parent ».D'ailleurs l'auteur conseille `aria-labelledby` plutôt que `aria-label` pour une raison de traduction que je n'ai pas encore compris : https://twitter.com/nice2meatu/status/1330144856325414915
    Marco Hengstenberg on …
  7. Nicolas Hoizey avatar Nicolas Hoizey
    @accessiblestef si tu as un lien vers un contenu à ce sujet chez Léonie, ça m'intéresse.
  8. Stéphane Deschamps avatar Stéphane Deschamps
    @nhoizey La « raison de traduction » = tous les contenus visibles sont généralement traduits quand on fait traduire la page, les contenus pas visibles (dans des attributs par exemple) passent souvent à l'as.
  9. Stéphane Deschamps avatar Stéphane Deschamps
    @nhoizey Je te retrouverai ça, ça date un peu maintenant (2-3 ans)