87

概述

HTML5现在允许 <svg>在不依赖于外部命名空间的情况下使用 HTML 文档进行标记（这里<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>

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

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

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

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

包起来

除了快速破解之外，我还在寻找在这些新 HTML 元素上放置替代文本的推荐方法。也许我忽略了一个 W3C 规范？还是现在还为时过早？

4

6 回答 6

102

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

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

数学机器学习

推荐

role="math"与aria-label周围的div标签一起使用（请参阅docs ）。添加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

推荐

将顶级标签<title>和标签与根 SVG 标签<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当元素还包含role="img".
  • 如果加载 SVG 文件（即不是在 HTML 中内联），根级<title>标签将成为浏览器页面的标题，屏幕阅读器将读取该标题。

参考

于 2011-01-21T07:38:55.427 回答
5

这里的所有答案都很古老；这是一个更新，基于2016 年的 CSS Tricks 文章，不幸的是，这是我从权威来源找到的最新消息。请注意，这是一个简短的总结，假设您熟悉可访问性并且无需针对旧版浏览器。有关更全面的讨论，请参阅文章。

对于包含在<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>的

  • aria-hidden="true"在<svg>标签上包含一个。
<svg aria-hidden="true">
  <use xlink:href="#some-icon"></use>
</svg>
于 2021-08-03T21:25:33.353 回答
3

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

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

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

于 2011-01-15T02:53:46.163 回答
3

关于 SVG，与上述建议类似但不完全相同，目前最好的方法似乎是使用 aria-labelledby 引用包含“替代文本”的元素的 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 编码，您仍然可以在没有外部文件的情况下执行此“内联”。）

于 2015-06-08T19:56:52.247 回答
2

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

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

于 2011-01-15T10:22:16.867 回答
-2

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

例如：

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

显然，这是假设屏幕阅读器会（错误地）读取 IMG 以外的元素上的 alt 属性。尚未测试，但如果它有效，它比等待屏幕阅读器赶上要好。

于 2011-01-28T18:53:49.130 回答