All you want to know about SVG Accessibility

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.

 

 

 

 

Published by Maxability

Maxability is advocating for digital equality for more than a decade. It believes in providing equal opportunities for persons with disabilities can improve the quality of life for everyone. Support Maxability in spreading awareness on digital accessibility. Reach Maxability for any digital accesssibility needs through our contact form or write to us at hello@maxability.co.in We want to hear from you. Together we can make digital a better and safe space for everyone.

0 replies on “All you want to know about SVG Accessibility”

View Other Blogs

Contact Us

Maxability Pvt Ltd Flat 360,
Block D2 SLS Signature Appartments,
Kaverappa Layout, Kadubeesanahalli,
Bangalore - 560103.

6366496664