可访问性:推荐用于SVG和MathML的ALT-文本约定?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (166)

概观

HTML5 现在允许 <svg><math>与HTML文档标记,而不依赖于外部名称空间(体面的概述这里)。两者都有自己的alt属性类似物(见下文),这些类似物在今天的屏幕阅读器软件中被有效地忽略了。因此,盲人用户无法访问这些元素。

是否有计划为这些新元素实施标准的替代文本惯例?我浏览了文档并干了!

更详细的信息

关于SVG: SVG的替代文本可以被认为是根titledesc标签的内容。

<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>

由于屏幕阅读器似乎没有认识到这一点,数学渲染库MathJaxaria-label在运行时将文本插入到属性中。

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

不幸的是,NVDA,JAWS和其他人还没有可靠地阅读这些标签。(更多关于WAI-ARIA

关于两者:在大部分不支持的ARIA属性方面缺乏成功,我尝试使用title属性。这些“外国”HTML元素似乎也被忽略。

包起来

不仅仅是简单的黑客攻击,我正在寻找推荐的方法来在这些新的HTML元素上放置替代文本。也许有一个我忽略的W3C规范?还是在游戏中还为时过早?

提问于
用户回答回答于

经过一番挖掘,我发现了一些有些官方的建议。不幸的是,现在大部分功能都无法使用。浏览器和屏幕阅读器在Math和SVG被认为是可访问之前有很多实现,但事情正在开始寻找。

免责声明:以下建议是我在过去几个月的编码中搜集的。如果有什么事情是错的,请告诉我。随着浏览器和AT软件的不断发展,我会尽力保持最新。

MATHML

建议

使用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门票。
  • 包装divspan标签似乎没有必要,因为它math是HTML5中的头等要素
  • 我发现很少引用MathML alttext标签。 这似乎是一个DAISY特定的添加,这里描述。

参考

SVG

建议

使用顶层<title><desc>与标签一起role="img",并aria-label在根SVG标记。

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

限制/注意事项

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

参考

用户回答回答于

一般来说,HTML5试图阻止作者提供隐藏于有视力的用户的内容,因为(a)它通常包含对于用户有用的新信息,(b)由于很少有人反馈(通常)有见识的作者,并且(c)它不被仔细维护,因此可以很快失效。

因此,不要将信息隐藏在属性中,而应考虑将其放置在页面上作为<p>与svg或数学部分相邻的标记中的标题,或将其放在<figcaption>标记中,然后将其与svg / math部分放在一起<figure>元件。

如果你真的不希望有远见的用户看到这些信息,我相信标准技术是绝对将标题定位为一个大的负“左”值,至少在屏幕阅读器赶上HTML5的时候。

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动