SVG stands for Scalable Vector Graphics. They define graphics on the web. This is comparable to other image types such as gifs and jpegs. This article outlines some knowledge on svg accessibility. The elements and attributes that support svg accessibility and the accessibility problems of svg.
<SVG> as a container
In addition to having an .svg image, Scalable Vector Graphics
- Can have an image within a <SVG>, shape etc
- Can have text
- Can have a link
- Can have any structural element
What other elements and attributes can <SVG> hold?
<SVG> allows the following elements and attributes related to accessibility.
<title>
Using <title> content authors can provide short description of the image and the shapes or any important information <svg> contains.
For example, A heart shape the title can be
<title>4 Likes</title>
Lang attribute
The <title> element can be provided with a lang attribute. The lang attribute defines the language of the content in SVG. This is not necessarily required if the parent page has the language attribute already mentioned. In latest versions of SVG content authors can provide multiple titles with different values for lang attribute.
<desc>
While the <title> provide a simple alternate text, <desc> will provide a precise description of the container.
<desc>Additional description of svg goes here</desc>
<g>
<g> is the grouping element within svg. One <svg> can have multiple <g> groups. Each group can have different <title> and <desc> elements. This grouping allows the content authors to provide more content and context of the content in <svg>.
<text>
The <text> element is used to provide the text in a svg. The content available in the <text> element is visible on the screen and is read by most of the screen readers.
ARIA roles, states and properties
To additionally support the elements and controls in svg, content authors can depend on WAI ARIA roles, states and properties.
For example, Content authors can add role img to notify screen readers that the <svg> is an image.
<svg role=”img” ..>
Now that we know some basic elements, let us look at the svg accessibility concerns.
SVG Accessibility Problems
- The <title> and desc> elements must be mapped to name and description properties of the accessibility APIs. Unfortunately most of the screen readers and browsers do not expose this content to screen readers.
- The svg element is not exposed to most screen readers. Content authors may want to add WAI ARIA role img to expose the role information.
- Each child component within svg in some browser and screen reader combinations is identified as a separate image. So content authors must provide role presentation to avoid such situations.
- The content supplied through <title> and <desc> is not exposed with certain screen reader and browser combination. Using aria-label, aria-labelledby or aria-describedby this problem can be solved.
- Links that are provided within a shape such as <circle> or <rect> are not exposed to the accessibility APIs. In addition adding role link, aria-label will expose semantics and contextual information to screen readers.
- Sometimes you may also want to use tabindex to either focus a control such as link within the svg or to provide a logical focus order. Use tabindex only when it is extremely necessary.
- In high-contrast mode, some content might not be visible. Take care of it.
Remember: Content supplied through <title> and <desc> is only available for screen readers but not be visible on the screen.