可访问性:SVG和MathML推荐的Alt-Text约定?

概观

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

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

更进一步的细节

关于SVG: SVG的替代文本可以被认为是根titledesc标签的内容。

 <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规范? 还是在游戏中还为时过早?

经过一番挖掘,我发现了一些有些正式的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中的头等要素 ,所以用divspan标签包装似乎是不必要的。
  • 我发现很less引用MathML alttext标签。
    更新:这似乎是一个DAISY特定的添加, 这里描述。

参考

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>标签将成为浏览器页面的标题,屏幕阅读器读取该标题。

参考

一般来说,HTML5试图阻止作者提供隐藏于有远见的用户的内容,因为(a)它通常包含对于用户有用的新信息,(b)由于很less有反馈(通常)(3)看不见的作者,(3)不仔细维护,因此可以迅速陈旧。

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

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

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

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

关于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,则仍然可以在没有外部文件的情况下以“内联”的方式执行此操作。

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

例如:

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

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