Skip to main content

Toolbar & Configuration

Making SVGs and Icons Accessible

Settings described here may depend on your current Pluro configuration. Confirm the effect of each change on the live website and on assistive technologies.

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/.


Validation checklist

  • Test keyboard access and visible focus.
  • Check the relevant semantics with a screen reader or accessibility tree.
  • Verify on real content and in dynamic states; automated checks alone are insufficient.
← Back to Knowledge Center
← More Toolbar & Configuration guides