辅助功能：推荐使用SVG和MathML的alt-text约定？

时间：2011-01-14 23:47:11

标签： html5 svg accessibility mathml alt-attribute

概述

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

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

详细信息

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

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

我发现one屏幕阅读器就是这样读的，但是这个标准呢？插入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规范？或者它还处于游戏的早期阶段？

6 个答案:

答案 0 :(得分：73)

经过一番挖掘，我发现了一些官方建议。不幸的是，大多数在这个时间点都不起作用。在将Math和SVG视为可访问之前，浏览器和屏幕阅读器都有很多要实现，但的内容开始查找。

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

MATHML

<强>建议

在周围的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 {{3}的相关NVDA门票}和here。
  • 包含div或span标记似乎没必要，因为math是HTML5中的here。
  • 我发现很少引用MathML alttext标记。
    更新：这似乎是first-class element特定的添加，描述为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测试版读取所有 <title>和<desc>标记，这可能是不受欢迎的。但是，当元素还包含aria-label时，NVDA，JAWS和WindowEyes将读取role="img"。
  • 如果加载SVG文件（即不在HTML中内联），则根级<title>标记将成为浏览器页面的标题，屏幕阅读器将读取

<强>参考

答案 1 :(得分：3)

一般来说，HTML5会试图阻止作者提供对视力正常的用户隐藏的内容，因为（a）它通常包含对视力正常的用户有用的新信息，（b）由于几乎没有反馈， （通常）有视力的作者，（c）没有仔细维护，因此很快就会变得陈旧。

因此，不要将信息隐藏在属性中，而是考虑将其正常​​放置在页面上作为svg或数学部分旁边的<p>标记中的标题，或者将文本放在{{1}中标记并将其和svg / math部分放在<figcaption>元素中。

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

答案 2 :(得分：3)

关于SVG，与上述建议类似但不完全相同，似乎当前最好的方法可能是使用aria-labelled来引用包含'alt text'的元素的id（而不是alt文本本身）。 

<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元素。

来源：Is it possible to create some IGrouping object

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

（如果这是一个严重问题，您可能希望使用img标签来研究嵌入SVG - 如果您使用数据URL并对SVG进行base64编码，您仍然可以在没有外部文件的情况下“内联”。）< / p>

答案 3 :(得分：2)

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

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

答案 4 :(得分：1)

这里所有的答案都很老；这是基于 CSS Tricks article from 2016 的更新，不幸的是，它与我从权威来源中找到的一样新。请注意，这是一个简短的摘要，假设您熟悉可访问性并且不需要针对较旧的浏览器。有关更全面的讨论，请参阅文章。

对于包含在 <img> 标签中的 svg

  • 向 role="img" 标记添加 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>

答案 5 :(得分：0)

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

例如：

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

显然，这是假设屏幕阅读器会在IMG以外的元素上读取alt属性（不正确）。没有经过测试，但它比等待屏幕阅读器能够赶上它更好。

相关问题
最新问题