Skip to main content

Axe Core Guide

Axe Core 4.6

svg elements with an img role must have an alternative text

Ensures that SVG elements with the roles img, graphics-document or graphics-symbol have a text alternative that is accessible.

In order to make information provided by non-text material (including SVG graphics) accessible, Success Criterion 1.1.1 requires the usage of a text alternative. Because they can be portrayed through any sensory modality (for example, visual, auditory, or tactile) to suit the user’s needs, text alternatives are a fundamental method of making information accessible. By including text alternatives, a wider range of user agents can present the content in different ways.

For instance, a person who is blind can request that the text equivalent of an image be read out using synthetic speech. An audio file’s text alternative can be presented for people who cannot hear it, allowing them to read it. Text alternatives will eventually make it simpler to translate information into sign language or a more basic version of the same language.

What this Accessibility Rule Checks

The algorithm for this rule returns:

  • True if the element has a <title>code child
<svg id="target"><title>Time II: Party</title></svg>
  • True if the <title> child has text nested in another element.
<svg id="target"><title><g>Time II: Party</g></title></svg>
  • False if the element has no <title> child.
<svg id="target"></svg>
  • False if the <title> child is empty.
<svg id="target"><title></title></svg>
  • False if the <title> is a grandchild.
<svg id="target"><circle><title>Time II: Party</title></circle></svg>
  • False if the <title> child has only whitespace.
<svg id="target"><title> \t\r\n </title></svg>
  • False if there are multiple titles and the first is empty.
<svg id="target"><title></title><title>Time II: Party</title></svg>

Learn more:

Related Accessibility Rules