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

by

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>Accessibility: recommended alt-text convention for SVG and MathML?</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

More Related Contents:

  1. How to draw human body in html5 svg and roate it in 360degree [closed]
  2. How to hide a text and make it accessible by screen reader?
  3. SVG drop shadow using css3
  4. How to apply a style to an embedded SVG?
  5. SVGs not scaling properly in IE – has extra space
  6. Add a background image (.png) to a SVG circle shape
  7. html/css hexagon with image inside
  8. Setting transform-origin on SVG group not working in Firefox
  9. make an html svg object also a clickable link
  10. Linking to CSS in an SVG embedded by an IMG tag
  11. Creating a ‘New’ spiky label with 24 or above point burst
  12. Extracting SVG from Font Awesome
  13. How to cut a circular part from an image?
  14. Making an svg image object clickable with onclick, avoiding absolute positioning
  15. Draw double curved item with beveled edges
  16. How to get rid of extra space below svg in div element
  17. How to get ScrollBars in SVG?
  18. div with triangle at the bottom with background image
  19. Insert HTML code inside SVG Text element
  20. Cross-browser embedded font in svg image
  21. How do I create a teardrop in HTML?
  22. Default html form focus without JavaScript
  23. Favicon Standard – 2023 – svg, ico, png and dimensions? [duplicate]
  24. How to render svg elements with crisp edges while still keeping anti-aliasing?
  25. How to display multiple lines of text in SVG?
  26. svg background image position is always centered in internet explorer, despite background-position: left center;
  27. Two input fields inside one label
  28. How can I display an image inside SVG circle in html5?
  29. Align svg to center of screen [duplicate]
  30. SVG animation delay on each repetition

Leave a Comment