Accessible SVGs

Published:
Updated:
Author:
License:
CC BY-SA 4.0

Methods for making SVGs accessible on websites, ensuring they are inclusive and understandable for users relying on assistive technologies. Detailed explanations of using <img> with alt or aria-label and inline <svg> with <title> or aria-labelledby to optimize SVG accessibility.

Introduction #

Scalable Vector Graphics (SVGs) are widely used to deliver rich and crisp visuals on the web. However, without proper accessibility features, SVGs can exclude users who rely on assistive technologies, such as screen readers. By implementing thoughtful accessibility practices, you can make SVGs understandable and inclusive for all users.

Below, I explore four key methods for implementing accessible SVGs and explain why they work effectively.

SVG Accessibility Method 1:
<img> + role="img" + alt="[desc]" #

Let’s look at an example for method 1:

<img role="img" alt="Level AAA conformance, W3C WAI Web Content Accessibility Guidelines 2.2" src="https://www.w3.org/WAI/WCAG22/wcag2.2AAA-blue.svg">

Explanation:

  1. What is being done? The <img> tag, which natively serves as an image container, is given the role="img" attribute for explicit semantic clarity. The alt attribute provides a concise textual description of the SVG content.

  2. Why it works:

    • The alt attribute ensures the description is accessible to screen readers, allowing visually impaired users to understand the image’s purpose.
    • The explicit role="img" clarifies the element’s role in scenarios where semantic nuances might be lost.
    • It’s a simple, well-supported approach for static, descriptive SVGs rendered via <img>.

SVG Accessibility Method 2:
<img> + role="img" + aria-label="[desc]" #

Let’s look at an example for method 2:

<img role="img" aria-label="Level AAA conformance, W3C WAI Web Content Accessibility Guidelines 2.2" src="https://www.w3.org/WAI/WCAG22/wcag2.2AAA-blue.svg">

Explanation:

  1. What is being done? The <img> tag is used again with role="img", but the descriptive text is provided via the aria-label attribute instead of alt.

  2. Why it works:

    • aria-label is used to supply an accessible name for the element, providing the same level of detail as alt for screen readers.
    • This method can be useful in contexts where the alt attribute might already serve a different purpose (e.g., decorative images where alt="" is used).
    • Similar to Method 1, it’s effective for static SVGs and maintains broad browser support.

SVG Accessibility Method 3:
<svg> + role="img" + <title> #

Let’s look at an example for method 3:

<svg role="img" ...>
   <title>Level AAA conformance, W3C WAI Web Content Accessibility Guidelines 2.2</title>
   [svg design]
</svg>

Explanation:

  1. What is being done? The <svg> tag is directly used to embed the vector graphic, with role="img" defining it as an image. A <title> element is nested within the SVG to provide a descriptive text.

  2. Why it works:

    • Screen readers interpret the <title> as the accessible name of the graphic, ensuring users understand its meaning.
    • The role="img" reinforces the purpose of the SVG, making its semantics explicit.
    • This approach is particularly effective for inline SVGs because the <title> is part of the SVG’s content structure.

SVG Accessibility Method 4:
<svg> + role="img" + <title> + aria-labelledby="[ID]" #

Let’s look at an example for method 4:

<svg role="img" aria-labelledby="conformance" ...>
   <title id="conformance">Level AAA conformance, W3C WAI Web Content Accessibility Guidelines 2.2</title>
   [svg design]
</svg>

Explanation:

  1. What is being done? The <svg> tag includes a role="img" attribute and references the <title> element using the aria-labelledby attribute. The <title> has a unique id that links it to the aria-labelledby attribute.

  2. Why it works:

    • aria-labelledby provides an explicit reference to the element that serves as the accessible name, ensuring screen readers prioritize the linked description.
    • This approach supports more complex use cases, such as when multiple descriptive elements (e.g., <desc> for detailed explanations) are used within the SVG.
    • It’s particularly useful for intricate graphics where additional context may be needed to convey meaning effectively.

Choosing the Right Method #

Each method offers distinct advantages depending on the SVG’s context and complexity. For example, simpler static graphics work well with Methods 1 or 2 using the <img> element, as these methods focus on straightforward descriptions. In contrast, Methods 3 and 4 are ideal for inline SVGs, with Method 4 particularly excelling when additional details or multiple descriptive elements like <desc> are required to enhance clarity. For example:

By employing these techniques, web developers can ensure their visual content is accessible to all users, fostering an inclusive and equitable digital experience. Whether using <img> with alt or aria-label, or embedding inline <svg> with <title> or aria-labelledby, these methods ensure that SVGs are meaningful and usable for everyone.

Also read about user-friendly images in websites.

FAQ's #

Most common questions and brief, easy-to-understand answers on the topic:

Why is accessibility important for SVGs?

Accessibility ensures that users relying on assistive technologies, like screen readers, can understand and interact with SVG content, fostering an inclusive web experience.

What is the benefit of using the alt attribute with <img> tags for SVGs?

The alt attribute provides a concise description of the SVG content, making it accessible to screen readers and improving the overall user experience.

When should I use aria-labelledby instead of aria-label for SVGs?

Use aria-labelledby for more complex SVGs where a descriptive element like <title> or <desc> is needed to provide detailed context, as it allows linking to these elements for better clarity.

Can the <title> element alone make an inline SVG accessible?

Yes, the <title> element provides an accessible name for the SVG, which screen readers interpret, but pairing it with role="img" enhances semantic clarity.

How do I choose between embedding SVGs with <img> or <svg>?

Use <img> for simpler, static SVGs requiring basic descriptions and <svg> for more complex or interactive graphics needing inline descriptions and advanced accessibility features.

Further readings #

Sources and recommended, further resources on the topic:

Jonas Jared Jacek • J15k

Jonas Jared Jacek (J15k)

Jonas works as project manager, web designer and developer since 2001. On top of that, his areas of expertise are in user experience, accessibility, internationalization, and domain names. See: https://www.j15k.com/

License: Accessible SVGs by Jonas Jared Jacek is licensed under CC BY-SA 4.0.

This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, for noncommercial purposes only. To give credit, provide a link back to the original source, the author, and the license e.g. like this:

<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.uxgem.com/articles/svg-accessibility">Accessible SVGs</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a>.</p>

For more information see the UXgem legal page.

“Make errors impossible. Making it impossible for the user to make errors is the best way to eliminate error messages.”

Alan Cooper , Software designer and programmerAbout Face, - UX quotes