Role attribute on SVGs to support aria-label

[b1tzmast3r]

I noticed that the span MathJax_SVG has a role of math and the svg tag doesn't have a role attribute. Our tests have shown that putting role="img" on the svg tag will improve screen reader performance. Would you ever consider updating this?

Current Rendering:

<span class="MathJax_SVG" id="MathJax-Element-2-Frame" role="math"...>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" aria-label="E equals M C squared" ...>

Recommendation:

<span class="MathJax_SVG" id="MathJax-Element-2-Frame"...>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-label="E equals M C squared"...">

[pkra]

Thanks for filing a separate issue. This came up recently in a separate discussion about AT actually. The problem seems to be inconsistent support for the math role. We plan to work on that end as well so we would appreciate any details you could provide.

Our tests have shown that putting role="img" on the svg tag will improve screen reader performance.

Could you tell us more about this? Your use case, the AT results etc. For example, it seems you have embedded speech text as an aria-label in the MathML source, is that correct? A live example (on jsbin codepen etc) with a description of different AT behaviors would be much appreciated.

This probably ties into #938 and would probably be fixed as part of that.

[corinnaSchultz]

I'm working with b1tzmast3r on this issue, so I can add a little context. We have MathML, and we're putting a description of the math in an annotation tag (e.g. "the square root of ex"). When the svg is generated from the MathML, the contents of the annotation tag is copied into an aria-label attribute and added to the svg tag. (I've tweaked one of the scripts from mathjax-node to be able to do this.)

We're seeing inconsistencies from the various screen readers in how they handle the resulting html, so we're trying to figure out what we can do to provide the broadest support, while still staying within the standards.

[b1tzmast3r]

Here are some additional details that we hope you find useful. It started off with us taking advantage of the MathJax v2.5 feature that allows aria-label to pass into the math rendered as SVG so we can properly describe our equations for AT. We've been partnering with NCAM to help us and their tests had proven that not all screen readers were working as expected and they helped us narrow down this possible solution.

I've created a jsFiddle example that demonstrates our test examples with additional details below: http://jsfiddle.net/b1tzmast3r/utd68pq5/

-The circle example is a very basic test that proves the aria-label is read using a wide range of AT/browser combinations. VO, JAWS, NVDA and ChromeVox read aria-label in Firefox, Safari and Chrome.

-Sample A matches the current MathJax implementation where role="math" is on the MathJax_SVG span which wraps the SVG. In this case the role=”math” is causing issues with many screen reader and browser combinations. VO and JAWS were not reading this case well at all.

-Sample B is our recommended solution where we’ve removed the role=”math” from the MathJax_SVG span and put role=”img” directly on the SVG element. This brings us back to our results with the circle where most cases of screen readers can access the aria-label. Note: We are still running into some issues with this equation in Sample B case using JAWS and Firefox. We believe there may be a bug tied to and specific to this SVG that is causing the problem. Since JAWS is able to read the equation in Chrome, we think this bug may fall on Firefox.

Let us know if you have questions.

Thanks,

Rob Howard

[pkra]

We're not quite sure what to do about this issue.

The background is that for #938 we're introducing a new extension which will generate hidden MathML for AT to consume. An aria-label on the input MathML would be exposed there and the visual output would be hidden from AT.

Technically, if an author does not use this new extension, then this issue still applies but it seems unlikely that someone who cares enough to provide aria-lables would not use the extension.

@b1tzmast3r @corinnaSchultz what do you think?

[pkra]

I admit this does not answer what is actually the best approach here. cc @jcsteh do you have a suggestion by any chance?

[pkra]

Follow up to our F2F.

After more research, let's go with role=img for SVG output, cf.

• http://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/
• https://dl.dropboxusercontent.com/u/377471/SVG/index.html (via Steve Faulkner), in particular https://dl.dropboxusercontent.com/u/377471/SVG/adobesimplesvgtest3.html

For HTML output, role=math.