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

Issue

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?

Solution

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

Answered By - Courtney Christensen