Accessible SVGs

An SVG is not an image, it is a graphics-document.

About SVGs

  • An SVG is not an image, it is a graphics-document.
  • A graphics-document is a type of document in which the visual appearance or layout of content conveys meaning.
  • Unlike images, SVGs can include structured child elements: link, graphics-symbol, group, img, graphics-object.

SVG Roles

  • An SVG has an implicit WAI-ARIA role="graphics-document".
  • In general it is best not to change the implicit role of the SVG.
  • If an SVG only contains a specific type of content, such as an image, you might assign a role="img" or, in the case of an icon, role="graphics-symbol". 'graphics-symbol' is a sub-class of the 'img' role.

Hiding SVGs

  • Assigning role="presentation" should be avoided, because it doesn't hide the SVG. It just cancels the native role.
  • Assistive technologies will still read elements that have been given a role="presentation", they just won't give then any semantic meaning. For example, a layout table might be given a role of presentation because you don't want assistive technologies to read out row and cell information, but users can still access the content in the cells.
  • In order to hide an SVG, it is best to give it an  attribute of aria-hidden='"true". This functions in a similar way to display:none in CSS.
  • More on the difference between  role="presentation" and aria-hidden="true".

The <title> tag

  • According to the SVG 2.0 specification, the <title> tag provides a short alternative description for the SVG element, in a similar way to an alt tag on an image.
  • The <title> element must be the first child element within the <svg>.
  • By default, the content in the <title> tag is not displayed visually.
  • Browser support for the <title> tag has been increasing, and is currently at about 95%.
  • To ensure that the SVG has a fully accessible label, WAI-ARIA attributes can be added.

    See the Pen SVG title by AJN (@anormand) on CodePen.

The <desc> tag

  • According to the SVG 2.0 specification, the <desc> tag provides element represents more detailed textual information for the SVG element.
  • The <desc> element appears after the <title> element.
  • By default, the content in the <desc> tag is not displayed visually.
  • Browser support for the <desc> tag has been increasing, and is currently at about 93%.
  • To ensure that the SVG has an accessible description, WAI-ARIA attributes can be added.

    See the Pen SVG desc by AJN (@anormand) on CodePen.

Example 1 - Icon + Text

role="presentation"

Bad: Here the icon is decorative because we have a text equivalent, i.e. 'Contact Stop 1'. But using role="presentation" doesn't hide the SVG from assistive technologies.

See the Pen SVG Example 1 Bad by AJN (@anormand) on CodePen.


aria-hidden="true"

Good: Here the icon is decorative because we have a text equivalent. The SVG has an implicit role="graphics-document", but is hidden from assistive technologies using aria-hidden="true".

See the Pen SVG Example 1 Good by AJN (@anormand) on CodePen.

Example 2 - Icon only

role="presentation"

Bad: Here the icon has meaning but there isn't any label.

See the Pen SVG Example 2 Bad by AJN (@anormand) on CodePen.


role="graphics-symbol"

Good: Here the icon has meaning and has been give a role="graphics-symbol", because the telephone is a symbol for getting in contact. An aria-label provides a text equivalent. Note: We could have used role="img", but graphics-symbol is more specific.

See the Pen SVG Example 2 Good by AJN (@anormand) on CodePen.

Example 3

No label on SVG

Bad: The SVG has a role="img" but doesn't have any alt text.

See the Pen SVG Example 3 Bad by AJN (@anormand) on CodePen.


aria-labelledby on SVG

Good: The SVG has an aria-labelledby attribute which references a title element. Note: the title element should be sufficient on it's own, but we added aria-labelledby to be sure.

See the Pen SVG Example 3 Good by AJN (@anormand) on CodePen.

Need web help?

All websites and applications which form part of the University web presence are expected to be compliant with the W3C's Web Accessibility Guidelines (WCAG) 2.2 AA guidelines.

Get web accessibility help