html5-可访问性:推荐用于SVG和MathML的替代文本约定吗?

概观

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

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

更多详情

关于SVG:可以将SVG的替代文本视为根titledesc标签的内容。

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

我找到了一个这样阅读的屏幕阅读器,但这是标准吗? 以前插入SVG的方法也存在可访问性问题,因为屏幕阅读器会不一致地处理title标签。

关于MathML:MathML的替代文本应存储在title属性中。

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

由于屏幕阅读器似乎没有意识到这一点,因此数学渲染库MathJax在运行时将文本插入到title属性中。

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

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

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

包起来

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

5个解决方案
72 votes

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

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

数学语言

建议

在周围的aria-label标签上使用<title><desc>(请参阅文档)。 role="img"的添加使屏幕阅读器可以专注于此元素。 可以使用特殊的快捷键(例如NVDA+Tab)来说出此元素的aria-label

<div role="math" tabindex="0" aria-label="[spoken equivalent]">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    ...
  </math>
</div>

局限性/考虑因素

  • <title>(以及次要的<desc>)上的粗略屏幕阅读器支持。
    更新:此处和此处有关aria-label的相关NVDA票证。
  • 由于aria-label是HTML5中的一等元素,因此似乎不需要在<title><desc>标签中进行包装。
  • 我发现很少引用MathML <title>标记。
    更新:这似乎是DAISY特定的附加功能,在此进行描述。

参考

  • [http://www.w3.org/TR/wai-aria/roles#math]
  • [http://lists.w3.org/Archives/Public/public-pfwg-comments/2008JanMar/0008.html]
  • [http://www.w3.org/TR/wai-aria-practices/#math]

SVG

建议

在根SVG标签上将顶级<title><desc>标签以及aria-labelrole="img"标签一起使用。

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

局限性/考虑因素

  • 截至2011年2月,IE 9 beta读取了所有<title><desc>标签,这可能是不可取的。 但是,当该元素还包含role="img"时,NVDA,JAWS和WindowEyes将读取aria-label
  • 如果加载SVG文件(即在HTML中不是内联的),则根级<title>标记将成为浏览器页面的标题,屏幕阅读器将读取该标题。

参考

  • [http://lists.w3.org/Archives/Public/www-svg/2010Oct/0029.html]
  • [http://lists.w3.org/Archives/Public/public-html/2010Jun/0127.html]
  • [http://www.w3.org/TR/wai-aria/roles#img]
  • [http://www.w3.org/TR/wai-aria/roles#namecalculation]
Courtney Christensen answered 2019-10-03T17:18:20Z
4 votes

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

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

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

Alohci answered 2019-10-03T17:19:02Z
3 votes

关于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编码,则仍然可以在没有外部文件的情况下进行“内联”。)

sam answered 2019-10-03T17:19:57Z
2 votes

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

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

Erik Dahlström answered 2019-10-03T17:20:34Z
0 votes

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

例如:

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

显然,这是基于以下假设:屏幕阅读器将(错误地)读取IMG以外的元素的alt属性。 还没有测试,但是总比等待屏幕阅读器赶上来要好。

ZiggyTheHamster answered 2019-10-03T17:21:11Z
translate from https://stackoverflow.com:/questions/4697100/accessibility-recommended-alt-text-convention-for-svg-and-mathml