Availability: Recommended alt text convention for SVG and MathML?

Question

Overview

HTML5 now allows <svg> and <math> mark up an HTML document without depending on external namespaces (a decent overview here ). Both have their own analog alt attributes (see below), which today are virtually ignored by screen readers. Therefore, these items are not accessible to blind users.

Are there any plans to implement a standard alt text agreement for these new elements? I looked through documents and dried in a dry state

More details

Regarding SVG: Alternate SVG text can be thought of as 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 found one screen reader that reads it as such, but is this the standard? Previous SVG insertion methods also had accessibility issues, since the <object> tags were handled using screen readers.

Regarding MathML: Alternate MathML text should be stored in the alttext attribute.

 <math alttext="A squared plus B squared equals C squared"> ... </math> 

Since screen readers don't seem to recognize this, the MathJax math rendering library inserts text into the aria-label attribute when -time is run.

 <span aria-label="[alttext contents]">...</span> 

Unfortunately, NVDA, JAWS and others do not read these labels reliably. (More on WAI-ARIA )

For both of them: the lack of success in mostly unsupported ARIA attributes, I tried using title attributes. They also seem to be ignored on these "alien" HTML elements.

Wrap-up

More than a quick hack, I'm looking for a recommended way to place alternate text in these new HTML elements. Perhaps there is a W3C spec that I'm missing? Or is it too early in the game?

Answer 1

After some digging, I found some official recommendations. Unfortunately, most of them are not functioning at this point in time. Both browsers and screen readers have many possibilities for implementation before Math and SVG can be considered affordable, but everything starts to look.

Disclaimer: The recommendations below are what I learned from the last few months of coding. If something is wrong, let me know. I will try to keep this up to date as browsers and AT software progress.

Mathml

Recommendation

Use role="math" along with aria-label in the surrounding div tag (see docs ). Adding tabindex="0" allows screen readers to focus specifically on this element; this aria-label element can be pronounced using a special key (for example, NVDA+Tab ).

 <div role="math" tabindex="0" aria-label="[spoken equivalent]"> <math xmlns="http://www.w3.org/1998/Math/MathML"> ... </math> </div> 

<strong> Limitations / Considerations

• Sketchy screen reader support on aria-label (and, less importantly, role="math" ).
  Update: NVDA Relevant aria-label tickets here and here .
• Wrapping div or span tags seems unnecessary as math is a first-class element in HTML5.
• I have found very few references to the MathML alttext tag.
  Update: It looks like a DAISY -special add-on, 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 the top level <title> and <desc> tags along with role="img" and aria-label in the root SVG tag.

 <svg role="img" aria-label="[title + description]"> <title>[title]</title> <desc>[long description]</desc> ... </svg> 

<strong> Limitations / Considerations

• As of February 2011, beta IE 9 is reading all <title> and <desc> tags, which is probably undesirable. However, NVDA, JAWS, and WindowEyes will read aria-label when the element also contains role="img" .
• When loading an SVG file (that is, not embedded in HTML), the root level tag <title> will become the title of the browser page that will be read using a 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

In general, HTML5 tries to refuse authors to provide content that is hidden from sighted users, because (a) it often contains new information that will be useful for sighted users, (b) it is often poorly written, because there are few reviews for (usually ) a sighted author, and (c) he is not maintained so carefully and therefore can quickly fade.

So, instead of hiding the information in the attribute, consider placing it on the page as a heading in the <p> next to the svg or math section or putting text in the <figcaption> and putting this and the svg / math section in the <figure> element.

If you really do not want the observed users to see the information, I believe that the standard technique is to completely position the signature with a large negative "left" value, at least until the screen readers catch up with HTML5.

Answer 3

In theory, an svg image should be more accessible than a bitmap with an alt tag. On the one hand, text can be stored as text in svg, whole pieces of text are not just a short sentence. It is sad if the firmware ignores this additional information. However, not all textual content may be visible at any given time, as for html. Many svg images are static images, but a growing trend (based on actual use on an open website) is to use more dynamic svg, for example, to display graphs or charts that you can edit or stack.

Another thing to keep in mind is that the <title> elements will be displayed as hints (for sighted users) in all browsers that support AFAIK svg (at least the latest generation), and that you can put them in other svg elements (the name refers to the element to which it refers is a direct descendant).

Answer 4

As for the SVG, which is similar but not identical to the above suggestions, it seems that the best current approach might be to use aria-labelled with a link to the identifier of the element that contains "alt text" (and 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 the title and desc elements by setting aria-labelledby = "svg1title svg1desc".

Source: http://www.sitepoint.com/tips-accessible-svg/

Annoyingly, if you do, you need to (somehow) make sure the identifiers are unique throughout the page (in other words, if you use a large number of SVGs, they should all have different identifiers for the name). This also applies to other identifiers in SVG and is a serious annoyance with the built-in SVG.

(If this is seriously problematic, you might want to learn the embedded SVG with the img tag - you can still do this inline without an external file if you use the data URL and base64-encoded SVG.)

Answer 5

Did not check this, but you can try adding alt = "whatever" to the DIV container. Yes, this is not a valid attribute for a DIV, but I see that older screen readers don't care where alt appears.

For example:

 <div aria-label="Whatever" alt="Whatever" role="math"> <math>...</math> </div> 

Obviously, this is done under the assumption that screen readers will read alt attributes (incorrectly) on elements other than IMG. Not tested, but it's better than waiting for screen readers to catch up if that works.