Html 可访问性：SVG和MathML的推荐alt文本约定？

概述

HTML5

和

使用HTML文档进行标记，而不依赖外部名称空间（概述）。两者都有自己的

alt

-属性类似物（见下文），而今天的屏幕阅读器软件实际上忽略了这些类似物。因此，盲人用户无法访问这些元素

是否有计划为这些新元素实施标准的alt-text约定？我已经搜索了文档，并没有任何结果

更多详细信息

关于SVG：SVG的替代文本可以被视为根

title

或

desc

标记的内容

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

由于屏幕阅读器似乎不承认这一点，因此数学渲染库在运行时将文本插入到

aria标签

属性中

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

。。。

不幸的是，NVDA、JAWS和其他公司也没有可靠地阅读这些标签。（更多关于）

关于这两个方面：由于缺乏基本上不受支持的ARIA属性的成功，我尝试使用

title

属性。在这些“外来”HTML元素上，这些似乎也被忽略了

总结

---

除了快速破解，我正在寻找在这些新HTML元素上放置替代文本的推荐方法。也许我忽略了一个W3C规范？或者说它在游戏中还为时过早？

一般来说，HTML5试图阻止作者提供对视力正常的用户隐藏的内容，因为（a）它经常包含对视力正常的用户有用的新信息，（b）它经常写得不好，因为对视力正常的作者几乎没有反馈，以及（c）它的维护不够仔细，因此可能很快就会过时

因此，不要将信息隐藏在一个属性中，而是把它放在页面上，作为一个标题，在一个与SVG或数学部分相邻的<代码> <代码>标签中，或者将文本放在<代码> <代码>标签中，并将它和SVG/MaSe部分放在<代码> <代码>元素中。

---

如果你真的不想让有视力的用户看到信息，我相信标准技术是绝对用一个大的负“左”值来定位标题，至少直到屏幕阅读器赶上HTML5为止。

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

---

另一件需要注意的事情是，

元素将在所有支持svg的浏览器AFAIK（至少是最新一代）中显示为工具提示（针对有视力的用户），您也可以将它们放在其他svg元素中（标题适用于它是直接子元素的元素）。

经过一些挖掘，我找到了一些官方的建议。不幸的是，目前大多数都无法正常工作。在Math和SVG被认为是可访问的之前，浏览器和屏幕阅读器都有很多东西要实现，但是事情开始好转了

免责声明：以下是我在过去几个月的编码过程中收集到的建议。如果出了什么问题，请告诉我。随着浏览器和软件的发展，我将努力使这一点保持最新

数学 建议

在周围的

div

标记上使用

role=“math”

和

aria标签（请参阅）。添加的
tabindex=“0”
允许屏幕阅读器专门关注此元素；此元素的
aria标签
可以使用特殊的快捷键（例如
NVDA+Tab
）说出

限制/注意事项


截至2011年2月，IE 9测试版读取的是所有
和
标签，这可能是不需要的。但是，当元素也包含
role=“img”
时，NVDA、JAWS和WindowEyes将读取
aria标签

如果加载一个SVG文件（即，在HTML中不内联），根级别的
标记将成为浏览器页面的标题，屏幕阅读器将读取该标题

参考资料






尚未测试此功能，但您可以尝试将alt=“whatever”添加到容器DIV中。是的，它不是DIV的有效属性，但我可以看到较旧的屏幕阅读器不关心alt显示在何处

例如：

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


...

显然，这是在假定屏幕阅读器会（错误地）读取除IMG之外的元素的alt属性的情况下进行的。还没有测试过，但这比等待屏幕阅读器跟进要好。
关于SVG，与上述建议类似但不完全相同，目前最好的方法似乎是使用aria Labelledb，通过引用包含“alt文本”（而不是alt文本本身）的元素的id


宽矩形

通过设置aria labelledby=“svg1title svg1desc”，还可以同时使用title和desc元素

资料来源：

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

（如果这是一个严重的问题，您可能希望研究使用img标记嵌入SVG-如果您愿意，您仍然可以在没有外部文件的情况下“内联”执行此操作
<div role="math" tabindex="0" aria-label="[spoken equivalent]">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    ...
  </math>
</div>

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

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

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