Html 辅助功能：推荐用于 SVG 和 MathML 的替代文本约定？

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

提问by Courtney Christensen

Overview

概述

HTML5 now allows<svg>and <math>markup with an HTML document without depending on external namespaces (decent overview here). Both have their own alt-attribute analogs (see below) which are effectively ignored by today's screen-reader software. Thus, these elements are inaccessible to blind users.

HTML5现在允许<svg>并<math>与HTML文档标记，而不依赖于外部名称空间（体面的概述这里）。两者都有自己的 -alt属性类似物（见下文），今天的屏幕阅读器软件有效地忽略了它们。因此，盲人用户无法访问这些元素。

Are there plans to implement a standard alt-text convention for these new elements?I've scoured the docs and have come up dry!

是否计划为这些新元素实施标准的替代文本约定？我已经搜索了文档并且已经干了！

Futher Details

更多详情

Regarding SVG:an SVG's alternate text could be considered the contents of the root titleor desctag.

关于 SVG：可以将 SVG 的替代文本视为根title或desc标签的内容。

<svg>
  <title>An image title</title>
  <desc>This is the longer image description</desc>
  ...
</svg>

I've found onescreen-reader which reads it as such, but is this standard? Previous methodsof inserting SVG also had accessibility issues since <object>tags are treatedly inconsistently by screen-readers.

我找到了一个可以读取它的屏幕阅读器，但这是标准吗？以前插入 SVG 的方法也存在可访问性问题，因为<object>屏幕阅读器对标签的处理不一致。

Regarding MathML:MathML's alternate text should be stored in the alttextattribute.

关于 MathML：MathML 的替代文本应存储在alttext属性中。

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

Since screen readers do not seem to acknowledge this, the math-rendering library MathJaxinserts text into an aria-labelattribute at run-time.

由于屏幕阅读器似乎不承认这一点，数学渲染库MathJaxaria-label在运行时将文本插入到属性中。

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

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

不幸的是，NVDA、JAWS 和其他人也不能可靠地读取这些标签。（更多关于WAI-ARIA）

Regarding both:lacking success with the largely-unsupported ARIA attributes, I tried using titleattributes. These also seem to be ignored on these "foreign" HTML elements.

关于两者：在很大程度上不受支持的 ARIA 属性方面缺乏成功，我尝试使用title属性。在这些“外来”HTML 元素上，这些似乎也被忽略了。

Wrap-Up

包起来

More than a quick hack, I'm looking for the recommended wayto place alternate-text on these new HTML elements. Perhaps there is a W3C spec I'm overlooking? Or is it still just too early in the game?

不仅仅是一个快速的黑客，我正在寻找推荐的方法来在这些新的 HTML 元素上放置替代文本。也许我忽略了 W3C 规范？或者现在还为时过早？

回答by 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 arestarting to look up.

经过一番挖掘，我发现了一些官方建议。不幸的是，大多数在这个时间点都不起作用。无论是浏览器和屏幕阅读器有很多实现之前数学和SVG可以考虑访问，但事情正在开始抬头。

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.

免责声明：以下建议是我在过去几个月的编码中收集到的。如果有什么不对劲，请告诉我。随着浏览器和 AT 软件的发展，我会尽量保持最新状态。

MathML

数学ML

Recommendation

推荐

Use role="math"along with an aria-labelon a surrounding divtag (see docs). The addition of tabindex="0"allows screen readers to focus specifically on this element; this element's aria-labelcan be spoken using a special key shortcut (such as NVDA+Tab).

使用role="math"具有沿aria-label上周边div标签（见文档）。添加tabindex="0"允许屏幕阅读器专门关注此元素；aria-label可以使用特殊的快捷键（例如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-labelhereand here.
• Wrapping in divor spantag seems unnecessary since mathis a first-class elementin HTML5.
• I found very little referencing the MathML alttexttag.
  Update:this appears to be a DAISY-specific addition, described here.

• 粗略的屏幕阅读器支持aria-label（不太重要role="math"）。
  更新：有关aria-label此处和此处的相关 NVDA 票证。
• 包装div或span标记似乎没有必要，因为它math是HTML5 中的一流元素。
• 我发现很少引用 MathMLalttext标签。
  更新：这似乎是DAISY特定的添加，在此处描述。

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

• 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

SVG

Recommendation

推荐

Use top-level <title>and <desc>tags together with role="img"and aria-labelon the root SVG tag.

使用顶层<title>和<desc>与标签一起role="img"，并aria-label在根SVG标记。

<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-labelwhen 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 willbe read by the screen reader.

• 截至 2011 年 2 月，IE 9 beta 读取所有<title>和<desc>标签，这可能是不可取的。但是，aria-label当元素还包含role="img".
• 如果加载 SVG 文件（即，不是内嵌在 HTML 中），根级<title>标签将成为浏览器页面的标题，屏幕阅读器将读取该标题。

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

• 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

回答by Alohci

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.

一般来说，HTML5 试图阻止作者提供对视力正常的用户隐藏的内容，因为 (a) 它通常包含对视力正常的用户有用的新信息，(b) 它经常写得很差，因为对（通常是) 视力正常的作者，并且 (c) 它没有得到仔细维护，因此很快就会过时。

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.

因此，与其将信息隐藏在属性中，不如考虑将其作为标题放在页面<p>上与 svg 或数学部分相邻的标签中，或者将文本放在<figcaption>标签中并将其和 svg/数学部分放在<figure>元素。

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.

如果你真的不想让视力正常的用户看到这些信息，我相信标准技术是绝对定位带有一个大的负“左”值的标题，至少在屏幕阅读器赶上 HTML5 之前是这样。

回答by sam

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 引用包含“替代文本”（不是替代文本本身）的元素的 id。

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

您还可以通过设置 aria-labelledby="svg1title svg1desc" 来同时使用 title 和 desc 元素。

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

来源：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.

令人讨厌的是，如果您这样做，您将需要（以某种方式）确保 ID 在整个页面中是唯一的（换句话说，如果您使用大量 SVG，它们都需要具有不同的标题 ID）。这也适用于 SVG 中的其他 ID，并且是内联 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.)

（如果这是严重的问题，您可能需要考虑使用 img 标签嵌入 SVG - 如果您使用数据 URL 和对 SVG 进行 base64 编码，您仍然可以在没有外部文件的情况下执行此“内联”操作。）

回答by Erik Dahlstr?m

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.

理论上，svg 图像应该比带有 alt 标签的光栅图像更易于访问。一方面，文本可以作为文本保存在 svg 中，整个文本片段而不仅仅是一个简短的句子。如果屏幕阅读器忽略了这些额外的信息，那就太可悲了。然而，并非所有文本内容在任何给定时间都可见，与 html 相同。许多 svg 图像是静态图像，但越来越多的趋势（基于开放网络上的实际使用）似乎是使用更动态的 svg，例如用于显示可以编辑或折叠的图形或图表。

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

另一件要注意的事情是，<title>元素将在所有支持 svg 的浏览器 AFAIK（至少是最新一代）中显示为工具提示（对于视力正常的用户），并且您也可以将它们放在其他 svg 元素中（标题适用于它是直接子元素的元素）。

回答by ZiggyTheHamster

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.

尚未对此进行测试，但您可以尝试将 alt="whatever" 添加到容器 DIV。是的，它不是 DIV 的有效属性，但我可以看到较旧的屏幕阅读器不关心 alt 出现的位置。

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.

显然，这是假设屏幕阅读器会（错误地）读取 IMG 以外的元素的 alt 属性。尚未测试，但如果它有效，它比等待屏幕阅读器赶上要好。