辅助功能：建议ALT文本约定SVG和MathML？辅助功能：建议ALT文本约定SVG和MathML？

概观

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

是否有计划实施这些新元素标准的ALT文本约定？ 我已经冲刷的文档，并拿出干！

进一步了解详情

关于SVG：一个SVG的替代文字可以被认为是根目录内容的title或desc标签。

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

我发现一个屏幕阅读器读取它是这样，但这个标准？ 先前的方法将SVG也有可访问性问题，因为<object>标签treatedly不一致通过屏幕阅读器。

关于MATHML：MATHML的替代文本应存放在alttext属性 。

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

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

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

不幸的是NVDA，JAWS，和别人不可靠但无论是读取这些标签。 （更多关于WAI-ARIA ）

关于这两个：缺乏成功与主要-ARIA不受支持的属性，我尝试使用title属性。 这似乎也对这些“外来” HTML元素被忽略。

包起来

不止一个快速的黑客，我正在寻找的推荐方式放置备用文本对这些新的HTML元素。 也许有我俯瞰一个W3C规范？ 或者是在比赛还有刚刚太早了？

Answer 1:

一些挖后，我发现了一些有点正式的建议。 不幸的是，大部分都不是在这个时间点的功能。 无论是浏览器和屏幕阅读器有很多实现之前数学和SVG可以考虑访问，但事情开始抬头。

免责声明：下面的建议是什么，我已经收集了编码的过去几个月。 如果事情是完全错误的，请让我知道。 我会尽量保持这个最新的浏览器和AT软件的进展。

MATHML

建议

使用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>

限制/注意事项

• 在粗略屏幕阅读器支持aria-label （和同样重要的role="math" ）。
  更新：关于相关NVDA门票aria-label 在这里和这里 。
• 包装在div或span标签似乎不必要的，因为math是一个一流的元素在HTML5。
• 我发现很少引用MATHML alttext标签。
  更新：这似乎是一个DAISY特异性此外，描述在这里 。

参考

• 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

建议

使用顶级<title>和<desc>加上标签role="img"和aria-label上的根SVG标记。

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

限制/注意事项

• 正如2011年2月的，IE 9测试读取所有 <title>和<desc>标记，这可能是不希望的。 然而，NVDA，JAWS和WindowEyes将读取aria-label时，元素也包含role="img" 。
• 如果加载SVG文件（即，在不嵌入HTML），根级别<title>标签将成为浏览器页面的标题，这将是由屏幕阅读器读取。

参考

• 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:

在一般情况下，HTML5试图从提供这与视力正常的用户隐藏内容劝阻的作者，因为（a）通常包含一些新的信息，这将是使用以短视的用户，（二）公司经常写得不好，因为有对小反馈（常）看见笔者，和（c）未以精心维护，因此可能很快就过时。

所以，与其在属性隐藏信息，考虑将其通常在网页上作为一个字幕<p>邻近于SVG或数学部分标记，或者将文本在一个<figcaption>标签，并将该和在SVG /数学部分<figure>元件。

如果你真的不想视力正常的用户看到的信息，我认为，标准技术是绝对的标题用大的负“左”的价值，至少要等到屏幕阅读器赶上HTML5这样的时间位置。

Answer 3:

关于SVG，相似但不完全相同的上述建议，似乎目前最好的办法可能是使用ARIA-labelledby指的是包​​含了“ALT文本”（而不是替代文字本身）元素的ID。

<svg aria-labelledby="svg1title">
<title id="svg1title">A wide rectangle</title>
<rect width="70" height="10" fill="black" />
</svg>

您也可以通过设置ARIA-labelledby =“svg1title svg1desc”用标题和说明元素。

来源： http://www.sitepoint.com/tips-accessible-svg/

烦人，如果你这样做，你将需要（在某种程度上）确保ID是整个页面中是唯一的（换句话说，如果您使用很多都需要为标题不同的ID SVGs的）。 这也适用于SVG内的其他ID和是一个普遍的严重烦恼与联SVG。

（如果这是严重问题，你可能要考虑使用img标签嵌入SVGs - 你仍然可以做到这一点“内联”而不需要外部文件，如果使用数据和URL的Base64编码的SVG）。

Answer 4:

从理论上讲SVG图像应该比用ALT标签的光栅图像更容易获得。 一方面文本可以被保存为文本在SVG，文字不只是短短的一句话的整个片段。 这是可悲的，如果屏幕阅读器忽略的额外信息。 然而，并非所有的文本内容可以在任何给定时间可见，相同的HTML。 许多SVG图像是静止图像，但不断增长的趋势（基于开放的网络实际使用）似乎是使用更多的动态svgs，例如用于显示可编辑，或折叠出图形或图表。

需要注意的另一件事是， <title>元素将被显示为AFAIK所有SVG的浏览器中的工具提示（对于视力正常的用户）的（至少在最新一代的），而且你可以把它们内部的其他SVG元素过多（对标题适用于它是一个直接子）的元素。

Answer 5:

没有测试过这一点，但你可以尝试添加ALT =“无所谓”到容器DIV。 是的，这不是DIV有效的属性，但我可以看到旧的屏幕阅读器不关心其中ALT出现。

例如：

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

显然，这是不是IMG的其他元素，前提是屏幕阅读器将读取的alt属性（错误地）下。 没有测试，但它不是等待屏幕阅读器赶上，如果它工作得更好。

文章来源: Accessibility: recommended alt-text convention for SVG and MathML?