Add role="img" to SVG images

[sslawrence521]

My understanding is this is a best practice to ensure the widest range of assistive technologies recognizes the SVG.

[mejiaj]

This is something we'd need to provide guidance based on the situation. Rather than adding them to all SVGs (decorative vs non-decorative images).

MDN on role="img"

The ARIA img role can be used to identify multiple elements inside page content that should be considered as a single image. These elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.

If you are using embedded SVG images in your page, it is a good idea to set role="img" on the outer element and give it a label. This will cause screen readers to just consider it as a single entity and describe it using the label, rather than trying to read out all the child nodes

Testing

Deque, creators of the axe tools, did a blog post about this in January 2019:
https://www.deque.com/blog/creating-accessible-svgs/

a11y-101 has a similar post
https://a11y-101.com/development/svg

---

The framework itself is only using SVG's in <img /> in the Banner & the mobile nav in header.

In my own testing on https://designsystem.digital.gov with Safari (Version 13.1.1 (15609.2.9.1.2)).

Voiceover identifies the icons in the dropdown as Dot gov group and HTTPS group. It seems it would be more correct, if we added role="img" to these icons to increases correctness on Safari.

[mejiaj]

Just adding this for reference.

These sections on the homepage use svg's in <img>, but they have no alt text so they seem purely decorative.

[mejiaj]

This is something we'd need to provide guidance based on the situation. Rather than adding them to all SVGs (decorative vs non-decorative images).

MDN on role="img"

The ARIA img role can be used to identify multiple elements inside page content that should be considered as a single image. These elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.

If you are using embedded SVG images in your page, it is a good idea to set role="img" on the outer element and give it a label. This will cause screen readers to just consider it as a single entity and describe it using the label, rather than trying to read out all the child nodes

Testing

Deque, creators of the axe tools, did a blog post about this in January 2019:
https://www.deque.com/blog/creating-accessible-svgs/

a11y-101 has a similar post
https://a11y-101.com/development/svg

---

The framework itself is only using SVG's in <img /> in the Banner & the mobile nav in header.

In my own testing on https://designsystem.digital.gov with Safari (Version 13.1.1 (15609.2.9.1.2)).

Voiceover identifies the icons in the dropdown as Dot gov group and HTTPS group. It seems it would be more correct, if we added role="img" to these icons to increases correctness on Safari.

[mejiaj]

Just adding this for reference.

These sections on the homepage use svg's in <img>, but they have no alt text so they seem purely decorative.