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

跟風遠走 提交于 2019-11-27 10:36:13
Courtney Christensen

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>[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

In general, HTML5 tries to discourage authors from providing content that's hidden from sighted users, because (a) it often contains new information that would be of use to sighted users, (b) it's frequently poorly written because there's little feedback to the (normally) sighted author, and (c) it is not maintained as carefully and therefore can go stale quickly.

So, instead of hiding the information in an attribute, consider placing it normally on the page as a caption in a <p> tag adjacent to the svg or math section, or put the text in a <figcaption> tag and put that and the svg/math section in a <figure> element.

If you really don't want sighted users to see the information, I believe that the standard technique is to absolutely position the caption with a large negative "left" value, at least until such time as screen readers catch up with HTML5.

Regarding SVG, similar but not identical to the above suggestions, it seems the best current approach may be to use aria-labelledby referring to the id of the element that contains the 'alt text' (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 both the title and desc elements by setting aria-labelledby="svg1title svg1desc".

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

Annoyingly, if you do this you will need to (somehow) ensure that the IDs are unique within the entire page (in other words if you use lots of SVGs they all need to have different IDs for the title). This also applies to other IDs within the SVG and is a general severe annoyance with inline SVG.

(If this is severely problematic, you might want to look into embedding SVGs using the img tag - you can still do this 'inline' without an external file if you use a data URL and base64-encode the SVG.)

In theory an svg image should be more accessible than a raster image with an alt-tag. For one thing text can be kept as text in an svg, whole fragments of text not just a short sentence. It's sad if screenreaders ignore that extra information. However not all text content may be visible at any given time, same as for html. Many svg images are static images, but a growing trend (based on actual use on the open web) seems to be to use more dynamic svgs, e.g for displaying graphs or diagrams that can be edited, or folded out.

Another thing to be aware of is that <title> elements will be shown as tooltips (for sighted users) in all svg-capable browsers AFAIK (at least the latest generation), and that you can put them inside other svg elements too (the title applies to the element to which it is a direct child).

Haven't tested this, but you could try adding alt="whatever" to a container DIV. Yes, it's not a valid attribute for DIV, but I can see older screen readers not caring where alt appears.

For example:

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

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!