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

Question 1

总览

HTML5现在允许使用HTML文档<svg>并<math>使用HTML文档进行标记，而无需依赖外部名称空间（请参见此处的详细介绍）。两者都有自己的alt属性类似物（见下文），今天的屏幕阅读器软件实际上已将其忽略。因此，盲人无法访问这些元素。

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

进一步的细节

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

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

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

关于MathML： MathML的替代文本应存储在alttextattribute中。

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

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

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

不幸的是，NVDA，JAWS和其他工具也无法可靠地读取这些标签。（有关WAI-ARIA的更多信息）

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

包起来

我正在寻找一种推荐的方法，以在这些新的HTML元素上放置替代文本，而不只是快速的技巧。也许我忽略了W3C规范？还是在游戏中还为时过早？

Question 2

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

免责声明：以下建议是我在过去几个月的编码中收集的。如果出现严重错误，请告诉我。随着浏览器和AT软件的发展，我将尽量保持最新状态。

数学语言

建议

使用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"）。
更新：有关aria-label 此处和此处的NVDA门票。
包装div或span标记似乎是不必要的，因为它math是HTML5中的一流元素。
我发现很少引用MathMLalttext标签。
更新：这似乎是一个DAISY特异性此外，描述在这里。

参考文献

SVG

建议

在根SVG标签上和上同时使用顶层<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>标签，这可能是不可取的。但是，aria-label当元素还包含时，NVDA，JAWS和WindowEyes将读取role="img"。
如果加载SVG文件（即在HTML中不是内联的），则根级别<title>标签将成为浏览器页面的标题，屏幕阅读器将读取该标题。

参考文献

Question 3

通常，HTML5会试图阻止作者提供对可见用户隐藏的内容，因为（a）它经常包含对可见用户有用的新信息，（b）由于对（通常是）有见识的作者，以及（c）维护不当时，可能会很快过时。

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

如果您真的不想让视力不佳的用户看到这些信息，我相信标准技术是将字幕绝对定位为具有较大的负“左”值，至少在屏幕阅读器赶上HTML5之前。

Question 4

关于SVG，与上述建议类似但不完全相同，似乎最好的当前方法可能是使用aria-labelled，方法是引用包含“替代文本”的元素的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标签来嵌入SVG-如果您使用数据URL并对SVG进行base64编码，则仍然可以在没有外部文件的情况下进行“内联”。）

Question 5

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

需要注意的另一件事是，<title>元素将在所有支持SVG的浏览器AFAIK（至少是最新一代）中显示为工具提示（供有见识的用户使用），并且您也可以将其放入其他SVG元素中（标题适用于是直接子元素的元素）。

Question 6

还没有测试过，但是您可以尝试将alt =“ whatever”添加到容器DIV中。是的，它不是DIV的有效属性，但是我可以看到较早的屏幕阅读器不在乎alt出现的位置。

例如：

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

显然，这是假定屏幕阅读器将（错误地）读取IMG以外的元素的alt属性。还没有测试，但是总比等待屏幕阅读器赶上来要好。