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?
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.
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
aria-label
(and less importantly role="math"
).aria-label
here and here.div
or span
tag seems unnecessary since math
is a first-class element in HTML5.alttext
tag.References
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
<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"
.<title>
tag will become the browser page's title, which will be read by the screen reader.References