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

Question

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?

Answer 1

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

• http://www.w3.org/TR/wai-aria/roles#math
• http://lists.w3.org/Archives/Public/public-pfwg-comments/2008JanMar/0008.html
• http://www.w3.org/TR/wai-aria-practices/#math

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

• http://lists.w3.org/Archives/Public/www-svg/2010Oct/0029.html
• http://lists.w3.org/Archives/Public/public-html/2010Jun/0127.html
• http://www.w3.org/TR/wai-aria/roles#img
• http://www.w3.org/TR/wai-aria/roles#namecalculation

Answer 2

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.)

Answer 3

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.

Answer 4

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.

Answer 5

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).

Answer 6

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>

Answer 7

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' />