Accessible SVGs

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"

Contact Stop 1

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"

Contact Stop 1

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.