html5 – 辅助功能:SVG和MathML的推荐alt文本约定?

概述

HTML5 now allows< svg>和< math>标记与HTML文档,而不依赖于外部命名空间(体面概述here)。两者都有自己的alt属性模拟(见下文),今天的屏幕阅读器软件实际上被忽略。因此,盲人用户不可访问这些元素。

是否有计划为这些新元素实施标准的alt-text约定?我洗了文件,干了!

进一步细节

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

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

我发现one屏幕阅读器这样读,但是这个标准? Previous methods插入SVG也具有可访问性问题,因为< 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属性,我尝试使用标题属性。在这些“外部”HTML元素上,这些也似乎被忽略。

包起来

不止一个快速的黑客,我正在寻找推荐的方式放置替代文本这些新的HTML元素。也许有一个W3C规范,我忽略?还是还只是太早的游戏?

解决方法

经过一番挖掘,我发现了一些有点官方的建议。不幸的是,大多数在这个时间点没有功能。浏览器和屏幕阅读器在Math和SVG被认为可以访问之前有很多实现,但是事情开始查找。

免责声明:以下建议是我在过去几个月的编码中收集的。如果事情死了,请让我知道。我将尽力保持最新的浏览器和AT软件进步。

MathML

建议

在周围的div标签上使用role =“math”以及aria标签(请参阅docs)。添加tabindex =“0”允许屏幕阅读器专注于此元素;这个元素的aria标签可以使用特殊的快捷键(例如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 herehere的相关NVDA票。
>包装在div或span标签看起来不必要,因为math在HTML5中是一个first-class element
>我发现很少引用MathML alttext标记。更新:这似乎是一个DAISY特定的添加,描述here

参考文献

> 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

建议

使用顶层< title>和< desc>标记与根SVG标记上的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>标签,这可能是不可取的。但是,当元素也包含role =“img”时,NVDA,JAWS和WindowEyes将读取aria标签。
>如果加载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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法