可访问性: SVG 和 MathML 的推荐替代文本约定？

小开

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.

小开

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).

小开

最佳答案

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

小开

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.

小开

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.)

小开

All of the answers here are very old; here's an update, based on a CSS Tricks article from 2016, which is unfortunately about as new as I could find from an authoritative source. Please note that this is a brief summary assuming a familiarity with accessability and no need to target older browsers. See the article for a fuller discussion.

For svg's included with an `<img>` tag

Add an alt value to the <img> tag.

<img src="https://some/domain/some.svg" alt="description of image here">

Note that if the image is purely decorative, you should include alt but leave it blank - alt="".

For inline `<svg>`'s

Add a <title> element; this will be included as a visual tooltip, and available to the Accessability API.
On the <svg> tag, add role="img".

<svg role="img">
<title>Descriptive Title Here</title>
<use xlink:href="#some-icon"></use>
</svg>

For decorative inline `<svg>`'s

Include an aria-hidden="true" on the <svg> tag.

<svg aria-hidden="true">
<use xlink:href="#some-icon"></use>
</svg>

小开

Andrew's answer is good. Additionally, if you're using react-icons you can just add the attributes to the icon and the title tag or hidden attribute will be added. Eg:

import { FiX } from 'react-icons/fi'


<FiX title='Close' />


<FiX aria-hidden='true' />

可访问性: SVG 和 MathML 的推荐替代文本约定？

MathML

SVG

For svg's included with an <img> tag

For inline <svg>'s

For decorative inline <svg>'s

For svg's included with an `<img>` tag

For inline `<svg>`'s

For decorative inline `<svg>`'s