Accessibility: recommended alt-text convention for SVG and MathML?

Asked 14/1, 2011 at 23:47 Answered 5/10, 2022 at 6:25

Solved html svg accessibility mathml alt-attribute

107

Overview

HTML5 now allows <svg> and <math> markup with an HTML document without depending on external namespaces (decent overview here). Both have their own alt-attribute analogs (see below) which are effectively ignored by today's screen-reader software. Thus, these elements are inaccessible to blind users.

Are there plans to implement a standard alt-text convention for these new elements? I've scoured the docs and have come up dry!

Futher Details

Regarding SVG: an SVG's alternate text could be considered the contents of the root title or desc tag.

<svg>
  <title>An image title</title>
  <desc>This is the longer image description</desc>
  ...
</svg>

I've found one screen-reader which reads it as such, but is this standard? Previous methods of inserting SVG also had accessibility issues since <object> tags are treatedly inconsistently by screen-readers.

Regarding MathML: MathML's alternate text should be stored in the alttext attribute.

<math alttext="A squared plus B squared equals C squared">
  ...
</math>

Since screen readers do not seem to acknowledge this, the math-rendering library MathJax inserts text into an aria-label attribute at run-time.

<span aria-label="[alttext contents]">...</span>

Unfortunately NVDA, JAWS, and others do not reliably read these labels yet either. (More on WAI-ARIA)

Regarding both: lacking success with the largely-unsupported ARIA attributes, I tried using title attributes. These also seem to be ignored on these "foreign" HTML elements.

Wrap-Up

More than a quick hack, I'm looking for the recommended way to place alternate-text on these new HTML elements. Perhaps there is a W3C spec I'm overlooking? Or is it still just too early in the game?

Rosemarie answered 14/1, 2011 at 23:47 Comment(0)

116

After some digging, I found some somewhat official recommendations. Unfortunately, most are not functional at this point in time. Both the browsers and the screen readers have a lot of to implement before Math and SVG can be considered accessible, but things are starting to look up.

Disclaimer: the below recommendations are what I have gleaned over the past few months of coding. If something is dead wrong, please let me know. I will try to keep this up to date as browsers and AT software progresses.

MathML

Recommendation

Use role="math" along with an aria-label on a surrounding div tag (see docs). The addition of tabindex="0" allows screen readers to focus specifically on this element; this element's aria-label can be spoken using a special key shortcut (such as NVDA+Tab).

<div role="math" tabindex="0" aria-label="[spoken equivalent]">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    ...
  </math>
</div>

Limitations/Considerations

Sketchy screen reader support on aria-label (and less importantly role="math").
Update: Relevant NVDA tickets regarding aria-label here and here.
Wrapping in div or span tag seems unnecessary since math is a first-class element in HTML5.
I found very little referencing the MathML alttext tag.
Update: this appears to be a DAISY-specific addition, described here.

References

SVG

Recommendation

Use top-level <title> and <desc> tags together with role="img" and aria-label on the root SVG tag.

<svg role="img" aria-label="[title + description]">
  <title>[title]</title>
  <desc>[long description]</desc>
  ...
</svg>

Limitations/Considerations

As of February 2011, IE 9 beta reads all <title> and <desc> tags, which is probably undesirable. However, NVDA, JAWS, and WindowEyes will read the aria-label when the element also contains role="img".
If loading an SVG file (that is, not inline in HTML), the root-level <title> tag will become the browser page's title, which will be read by the screen reader.

References

Rosemarie answered 21/1, 2011 at 7:38 Comment(2)

What about inline SVG? – Kostman 9/10, 2015 at 14:43

Interestingly Chrome (v69, Firefox not tested) displays inlined <svg>s as is when display images is switched off. That seemed like an edge case for me, but now the answer is sufficient to use. – Persona 4/10, 2018 at 4:33

All of the answers here are very old; here's an update, based on a CSS Tricks article from 2016 (which is unfortunately about as new as I could find from an authoritative source) for the SVG portion of the question. Please note that this is a brief summary assuming a familiarity with accessability and no need to target older browsers. See the article for a fuller discussion.

For svg's included with an `<img>` tag

Add an alt value to the <img> tag.

<img src="https://some/domain/some.svg" alt="description of image here">

Note that if the image is purely decorative, you should include alt but leave it blank - alt="".

For inline `<svg>`'s

Add a <title> element; this will be included as a visual tooltip, and available to the Accessability API.
On the <svg> tag, add role="img".

<svg role="img">
 <title>Descriptive Title Here</title>
 <use xlink:href="#some-icon"></use>
</svg>

For decorative inline `<svg>`'s

Include an aria-hidden="true" on the <svg> tag.

<svg aria-hidden="true">
  <use xlink:href="#some-icon"></use>
</svg>

League answered 3/8, 2021 at 21:25 Comment(2)

Just tested this answer using Tailwind CSS and React SVG icons (heroicons) and this answer works perfectly. Put the title and role in. – Avery 7/10, 2021 at 0:21

As I was a bit confused about the use part, is this really necessary? I get the impression from digging it isn't. – Bonsai 1/2, 2024 at 9:16

In general, HTML5 tries to discourage authors from providing content that's hidden from sighted users, because (a) it often contains new information that would be of use to sighted users, (b) it's frequently poorly written because there's little feedback to the (normally) sighted author, and (c) it is not maintained as carefully and therefore can go stale quickly.

So, instead of hiding the information in an attribute, consider placing it normally on the page as a caption in a <p> tag adjacent to the svg or math section, or put the text in a <figcaption> tag and put that and the svg/math section in a <figure> element.

If you really don't want sighted users to see the information, I believe that the standard technique is to absolutely position the caption with a large negative "left" value, at least until such time as screen readers catch up with HTML5.

Vaporific answered 15/1, 2011 at 2:53 Comment(5)

Thanks for reminding me of <figcaption>. That is probably the best "in the meantime" solution for SVG images. I still have not found any reference as to whether a screen reader speaking the top-level <desc> tag is standard or not. Perhaps I'll prod the NVDA lists. I'm going to mark this as the accepted answer, since it's the most complete (I kinda figured there wouldn't be a definite standard anyone could point to). – Rosemarie 18/1, 2011 at 15:58

Alt attributes are a standard almost as old as HTML itself. They're not a hack, nor are they "hidden content", and their use is certainly NOT discouraged. Beyond that, there are a lot of cases where it's not sensible to use both an image and text -- such as icons (as the entire point of icons is often to replace text entirely.) – Crabbe 23/5, 2019 at 15:36

@StephenR - The purpose of my answer was to explain the thinking that was being expressed in the HTML5 design mailing lists of the time. The alt attribute was indeed under some pressure, thankfully it survived the cut, but for example the summary attribute on tables did not, removed from HTML5 for the same reasons explained in my answer. – Vaporific 23/5, 2019 at 17:1

It also explains why for example, there's no alt attribute for the poster image of a video. – Vaporific 23/5, 2019 at 17:16

Interesting how things developed. Glad they kept it — it would have been ridiculous to have dumped Alt – Crabbe 26/5, 2019 at 15:16

In theory an svg image should be more accessible than a raster image with an alt-tag. For one thing text can be kept as text in an svg, whole fragments of text not just a short sentence. It's sad if screenreaders ignore that extra information. However not all text content may be visible at any given time, same as for html. Many svg images are static images, but a growing trend (based on actual use on the open web) seems to be to use more dynamic svgs, e.g for displaying graphs or diagrams that can be edited, or folded out.

Another thing to be aware of is that <title> elements will be shown as tooltips (for sighted users) in all svg-capable browsers AFAIK (at least the latest generation), and that you can put them inside other svg elements too (the title applies to the element to which it is a direct child).

Kayser answered 15/1, 2011 at 10:22 Comment(0)

Regarding SVG, similar but not identical to the above suggestions, it seems the best current approach may be to use aria-labelledby referring to the id of the element that contains the 'alt text' (not the alt text itself).

<svg aria-labelledby="svg1title">
<title id="svg1title">A wide rectangle</title>
<rect width="70" height="10" fill="black" />
</svg>

You can also use both the title and desc elements by setting aria-labelledby="svg1title svg1desc".

Source: http://www.sitepoint.com/tips-accessible-svg/

Annoyingly, if you do this you will need to (somehow) ensure that the IDs are unique within the entire page (in other words if you use lots of SVGs they all need to have different IDs for the title). This also applies to other IDs within the SVG and is a general severe annoyance with inline SVG.

(If this is severely problematic, you might want to look into embedding SVGs using the img tag - you can still do this 'inline' without an external file if you use a data URL and base64-encode the SVG.)

Stringfellow answered 8/6, 2015 at 19:56 Comment(0)

Andrew's answer is good. Additionally, if you're using react-icons you can just add the attributes to the icon and the title tag or hidden attribute will be added. Eg:

import { FiX } from 'react-icons/fi'

<FiX title='Close' />

<FiX aria-hidden='true' />

Shabbygenteel answered 5/10, 2022 at 6:25 Comment(0)

-2

Haven't tested this, but you could try adding alt="whatever" to a container DIV. Yes, it's not a valid attribute for DIV, but I can see older screen readers not caring where alt appears.

For example:

<div aria-label="Whatever" alt="Whatever" role="math">
    <math>...</math>
</div>

Obviously, this is under the assumption that screen readers will read alt attributes (incorrectly) on elements other than IMG. Haven't tested, but it's better than waiting for screen readers to catch up if it works.

Supersonics answered 28/1, 2011 at 18:53 Comment(1)

no dice :-( I have tried that and it does not work (with modern screen readers, anyway). aria-label and aria-labelledby seen to be the proper method. Support is still sketchy, though. – Rosemarie 4/2, 2011 at 0:2

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

MathML

SVG

For svg's included with an <img> tag

For inline <svg>'s

For decorative inline <svg>'s

Recommended topics

Hot tags

For svg's included with an `<img>` tag

For inline `<svg>`'s

For decorative inline `<svg>`'s