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

Solution 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

Solution 2:

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