可访问性：推荐 SVG 和 MathML 的替代文本约定？答案

【问题标题】：Accessibility: recommended alt-text convention for SVG and MathML?可访问性：推荐 SVG 和 MathML 的替代文本约定？
【发布时间】：2011-01-14 23:47:11
【问题描述】：

概述

HTML5 now allows <svg> 和 <math> 标记与 HTML 文档不依赖于外部命名空间（体面的概述 here）。两者都有自己的alt-attribute 类似物（见下文），今天的屏幕阅读器软件实际上忽略了它们。因此，盲人用户无法访问这些元素。

是否有计划为这些新元素实施标准 alt-text 约定？我已经搜索了文档并且已经干了！

更多详情

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

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

我发现one screen-reader 可以这样读取它，但这是标准吗？插入 SVG 的Previous methods 也存在可访问性问题，因为屏幕阅读器对<object> 标签的处理不一致。

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

<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 规范？还是现在还为时过早？

【问题讨论】：

标签： html svg accessibility mathml alt-attribute

【解决方案1】：

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

免责声明：以下建议是我在过去几个月的编码中收集到的。如果有什么问题，请告诉我。随着浏览器和 AT 软件的进步，我会尽量保持更新。

数学机器学习

SVG

对于带有`<img>` 标签的svg

将alt 值添加到<img> 标记。

<img src="https://some/domain/some.svg" alt="description of image here">

请注意，如果图像纯粹是装饰性的，则应包含 alt 但将其留空 - alt=""。

对于内联`<svg>`的

添加<title>元素；这将作为可视化工具提示包含在内，可供 Accessability API 使用。
在<svg> 标签上，添加role="img"。

<svg role="img">
 <title>Descriptive Title Here</title>
 <use xlink:href="#some-icon"></use>
</svg>

用于装饰内联`<svg>`的

在<svg> 标签上包含aria-hidden="true"。

<svg aria-hidden="true">
  <use xlink:href="#some-icon"></use>
</svg>

【讨论】：

刚刚使用 Tailwind CSS 和 React SVG 图标（英雄图标）测试了这个答案，这个答案完美运行。把标题和角色放进去。

【解决方案3】：

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

因此，与其将信息隐藏在属性中，不如考虑将其作为标题放在页面上，与 svg 或数学部分相邻的 <p> 标签中，或者将文本放入 <figcaption> 标签中并放入以及<figure> 元素中的 svg/math 部分。

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

【讨论】：

感谢您提醒我<figcaption>。这可能是 SVG 图像的最佳“同时”解决方案。我仍然没有找到任何关于使用顶级<desc> 标签的屏幕阅读器是否是标准的参考。也许我会刺激 NVDA 列表。我将把它标记为可接受的答案，因为它是最完整的（我有点想没有任何人可以指出的明确标准）。
Alt 属性是一个几乎与 HTML 本身一样古老的标准。它们不是黑客，也不是“隐藏内容”，当然不鼓励使用它们。除此之外，在很多情况下，同时使用图像和文本是不明智的——例如图标（因为图标的全部意义通常是完全替换文本。）
@StephenR - 我回答的目的是解释当时 HTML5 设计邮件列表中表达的想法。 alt 属性确实承受了一些压力，幸好它在剪切中幸存下来，但例如表格上的 summary 属性没有，出于我的回答中解释的相同原因，从 HTML5 中删除了。
它还解释了为什么，例如，视频的海报图像没有 alt 属性。
有趣的是事情是如何发展的。很高兴他们保留了它 - 抛弃 Alt 会很荒谬

【解决方案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 编码，您仍然可以在没有外部文件的情况下执行此“内联”。）

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

尚未对此进行测试，但您可以尝试将 alt="whatever" 添加到容器 DIV。是的，它不是 DIV 的有效属性，但我可以看到旧的屏幕阅读器不关心 alt 出现在哪里。

例如：

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

显然，这是假设屏幕阅读器会（错误地）读取 IMG 以外的元素上的 alt 属性。还没有测试过，但是如果它可以工作的话，这比等待屏幕阅读器赶上来要好。

【讨论】：

no dice :-( 我已经尝试过了，但它不起作用（无论如何，对于现代屏幕阅读器）。aria-label 和 aria-labelledby 被认为是正确的方法。支持仍然粗略，不过。

数学机器学习

SVG

对于带有&lt;img&gt; 标签的svg

对于内联&lt;svg&gt;的

用于装饰内联&lt;svg&gt;的

对于带有`<img>` 标签的svg

对于内联`<svg>`的

用于装饰内联`<svg>`的