可访问性：SVG和MathML推荐的Alt-Text约定？

概观

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

是否有计划为这些新元素实施标准的替代文本惯例？ 我已经搜遍了文档，干起来了！

更进一步的细节

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

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

我发现一个屏幕阅读器是这样读取的，但这是标准吗？ 以前插入SVG的方法也有可访问性问题，因为<object>标签被屏幕阅读器不一致地处理。

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

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

由于屏幕阅读器似乎没有认识到这一点，math渲染库MathJax在运行时将文本插入到aria-label属性中。

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

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

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

包起来

不仅仅是一个简单的黑客攻击，我正在寻找推荐的方法来在这些新的HTML元素上添加替代文本。 也许有一个我忽略的W3C规范？ 还是在游戏中还为时过早？

Answer 1

经过一番挖掘，我发现了一些有些正式的build议。 不幸的是，在这个时候，大部分function都不起作用。 浏览器和屏幕阅读器在Math和SVG被认为是可访问的之前有很多实现，但事情正在开始寻找。

免责声明：以下build议是我在过去几个月编码收集的。 如果有什么事情是错的，请告诉我。 随着浏览器和AT软件的不断发展，我将尽力保持最新。

MATHML

build议

使用role="math"以及周围div aria-label上的aria-label标签（请参阅文档 ）。 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" ）。
  更新： 在这里和这里关于aria-label相关NVDA票。
• 由于math是HTML5中的头等要素 ，所以用div或span标签包装似乎是不必要的。
• 我发现很less引用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

build议

在根SVG aria-label上使用顶级<title>和<desc>标签以及role="img"和aria-label 。

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

限制/注意事项

• 截至2011年2月，IE 9 beta会读取所有 <title>和<desc>标签，这可能是不可取的。 但是，当元素还包含role="img"时，NVDA，JAWS和WindowEyes将读取aria-label 。
• 如果加载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）它通常包含对于用户有用的新信息，（b）由于很less有反馈（通常）（3）看不见的作者，（3）不仔细维护，因此可以迅速陈旧。

因此，不要将信息隐藏在属性中，而应考虑将其正常​​放置在页面上作为与svg或math部分相邻的<p>标记中的标题，或者将该文本放在<figcaption>标记中，并将该标记svg /math部分在<figure>元素中。

如果你真的不希望有远见的用户看到这些信息，我相信标准技术是绝对地将标题定位为一个大的负“左”值，至less在屏幕阅读器赶上HTML5的时候。

Answer 3

理论上来说，一个svg图像应该比带有alt-tag的光栅图像更容易被访问。 一方面，文本可以作为文本保存，整个文本片段不只是一个简短的句子。 屏幕阅读器忽略这些额外的信息令人伤心。 然而，不是所有的文本内容在任何给定的时间都可以看到，和html一样。 许多SVG图像是静态的图像，但是越来越多的趋势（基于开放networking上的实际使用）似乎是使用更多的dynamicSVG，例如用于显示可以编辑或折叠的graphics或图表。

还有一点需要注意的是<title>元素将在所有支持svg的浏览器AFAIK（至less是最新一代）中作为工具提示（针对有见识的用户）显示出来，并且可以将它们放入其他svg元素中标题适用于它是直接子元素）。

Answer 4

关于SVG，与上述build议类似但不完全相同，似乎目前最好的方法可能是使用aria-labelledby引用包含“alt文本”（而不是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”来使用title和desc元素。

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

烦人的是，如果你这样做，你需要（以某种方式）确保整个页面中的ID是唯一的（换句话说，如果你使用大量的SVG，他们都需要有不同的标题ID）。 这也适用于SVG中的其他ID，并且对于内联SVG是普遍严重的烦恼。

（如果这是严重的问题，您可能需要考虑使用img标记embeddedSVG – 如果您使用数据URL并使用base64编码SVG，则仍然可以在没有外部文件的情况下以“内联”的方式执行此操作。

Answer 5

没有testing过这个，但是你可以尝试添加alt =“whatever”到一个容器DIV。 是的，这不是DIV的有效属性，但我可以看到较旧的屏幕阅读器不关心在哪里出现。

例如：

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

显然，这是假设屏幕阅读器将读取除IMG以外的元素（错误地）的alt属性。 还没有testing，但它比等待屏幕阅读器赶上，如果它的工作更好。