Making SVGs and Icons Accessible

  • howto

Inline SVG

To make an SVG accessible, follow these steps:

  1. Include a <title> tag immediately below the <svg> tag in the SVG’s XML output.
  2. The <title> tag should be concise, similar to the alt attribute for an image.
  3. Add an aria-labelledby attribute to the <svg> tag that references the <title> tag.
  4. If there are multiple shapes, consider adding a <title> tag for each shape group.
  5. Including a <desc> tag (description) alongside the <title> tag can greatly benefit users of assistive technology. Dudley Storey describes <desc> as a longer explanation of the SVG element, detailing its purpose or design. For example: “Bar chart showing company sales by country, in millions of dollars (US).”
  6. For decorative SVGs, these attributes are not necessary.

Example:

<svg aria-labelledby="title">
  <title id="title" lang="en">title</title>
  <g>
    <rect  fill="_____" />
  </g>
</svg>

Icon Fonts

Icons can effectively communicate information without words. To ensure icon fonts are accessible, consider the following best practices:

  1. Purely Decorative Icons: If the icon is decorative, include the attribute aria-hidden="true".
  2. Contextually Important Icons: Include a title attribute and a styled screen reader text span.

Example for Decorative Icon:

htmlCopy code<i class="fa fa-bicycle" aria-hidden="true" title="title"></i>
<span class="screenreader-text">title</span>

Example for Contextual Icon:


<span class="screenreader-text">
  <span class="icon-star" aria-hidden="true"></span>
  Favorite
</span>

Credit to Source:
This content is based on a guide for making SVGs and icons accessible as presented on source http://web-accessibility.carnegiemuseums.org/code/svg/.