Name SVGs with proper semantics

Applicable Role(s): Developer

Overview

Scalable vector graphics (SVGs) need additional accessibility information to be conveyed properly to all users. SVG markup by itself can produce a confusing output for anyone using a screen reader. If the SVG is acting as an image, it should have a text alternative, similar to images with all text.

Best Practices and Tips

Inline SVGS

  •  Inline SVG code acting as an image must have a role attribute of image (role="img").
  • Inline SVGs with a role of image must have an aria-labelledby attribute, referring to the title ID attribute (<title id="">...</title>).
    • Note: the alt attribute is not valid on an SVG, so the accessible name comes from the aria-labelledby attribute.
  • If the SVG is decorative (i.e. doesn't add meaning to the page), or is redundant to text-based content, use aria-hidden="true" to create a decorative image. This is similar to img alt="".

SVG as an Image Source

Example: <img src="//marcom.wwu.edu/image-name.svg">

  • The SVG source code should have a role of image (role="img").
  • Informative or actionable images (img) with an SVG source must be named by either: an alt attribute, an aria-labelledby attribute, or an aria-label attribute.

Examples/Patterns

Lightbulb icon

Inline SVG Example


<svg role="img" aria-labelledby="lightbulb8" ...> 
<title id="lightbulb8">
Lightbulb icon!\
</ title>
<path .../></svg>

SVG as Image Source Example


<img src="../example-image.svg" 
alt="Lightbulb icon" />
Example borrowed from Deque: Creating Accessible SVGs.

Need Accessibility Help?

Contact Carly Gerard

Contact David Engebretson