Improve SVG Accessibility

Created on 9 December 2015, about 9 years ago
Updated 29 May 2023, over 1 year ago

As suggested in this blog post on SVG accessibility, we should Provide a title

<svg version="1.1" width="300" height="200" aria-labelledby="title">
<title id="title">Green rectangle</title>
<rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
</svg>

We should be able to simplify the HTML and have the "<title> element provid an alternative text description of the SVG content. Think of it in the same way you would the alt attribute on the HTML <img> element."

Mind you, at the time of the report, only "IE and Firefox correctly expose this information, and only Jaws in IE makes use of it" without the use of aria-labelledby as per the example above.

As the article suggests, there are some other ways that we could look at enhancing accessibility of the SVG files too. Adoption will depend on the support by Assistive Technology tools though.

📌 Task
Status

Postponed

Version

11.0 🔥

Component
Image system 

Last updated 1 day ago

Created by

🇨🇦Canada mgifford Ottawa, Ontario

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024