Responsive Web Design, Part 1 (2015)

Mastering SVG For Responsive Web Design

Making SVGs Accessible

Responsive web design is about more than just adapting your website’s layout to different device sizes. It’s also about making sure your content responds to your users’ needs so they can access it from any device no matter the context — this content also includes any and all images. No website or application is truly responsive if it is not accessible.

SVG comes with a set of accessibility features⁶⁰ to make the images more accessible to a wider group of users, including those with disabilities. A number of these SVG features can also increase usability of content for many users without disabilities, such as users of personal digital assistants, mobile phones or other non-traditional web access devices.

In the SVG specification, two elements exist to make SVG images more accessible: <title> and <desc>. These elements are used to provide a text alternative to the graphic.

The <title> element is similar to the alt attribute of the <img> tag. It provides a human-readable title for an SVG container (such as an SVG <g> element), or graphics element, or the root <svg> element. The <title> has to be the first descendant of its container and is not rendered by default. However, it may be rendered by a graphical user agent as a tooltip. It may be rendered as speech by a speech synthesizer if styled to do so.

<title>Company logo</title>

</svg>

The <desc> (description) element provides a longer, more complete description of an element that contains it. It is useful for complex content that has functional meaning.

<title>Chemical Reaction</title>

<desc>Animated illustration showing the stages of a chemical reaction in a laboratory.</desc>

</svg>

These accessibility elements are part of SVG 1.1 — but SVG 1.1 accessibility support is limited in browsers and screen readers.

Leonie Watson, digital accessibility consultant and member of the W3C HTML Working Group and HTML Accessibility Task Force, conducted and shared research⁶¹ indicating that the <title> and <desc> elements, and the role of the <svg> element are not represented consistently in browser accessibility APIs and screen readers.

According to Watson⁶², it is possible to enhance the information exposed through the browser accessibility APIs with a handful of ARIA attributes — specifically role and aria-labelledby.

To take advantage of these attributes, the title and desc are given IDs that are referenced by aria-labelledby, and the role attribute is used to specify a role for the SVG — which in most cases is img.

<title id="title">Chemical Reaction</title>

<desc id="description">Animated illustration showing the stages of a chemical reaction in a laboratory.</desc>

</svg>

If the graphic contains interactive elements, such as a link (<a>), the role="img" may not be appropriate anymore. Giving a role to the <a> element in this case would allow screen readers to more correctly recognize it as an interactive element. Wrapping plain text in a <text> element helps make that text accessible. As we mentioned earlier, text that is outlined is converted into SVG shapes and hence will not be recognized as text.

These are small details and simple measures that have a significant effect on the accessibility and usability of our websites.