使用Aria-describedby为图片提供描述_20160415


说明

该技巧适合那些简短描述不能充分传达功能或者信息的时候。

WAI-ARIA的一个特征就是将描述文本与章节、图画、表单元素、图片等使用aria-describedby属性联系起来。这与longdesc属性类似,都是提供额外的信息帮助用户理解复杂图片。类似longdesc,使用aria-describedby提供的描述文本与alt文本是分开的。不同于longdesc,Aria-describedby不能引用页面外的文本。使用页面内容为相同页面内的图片提供长描述的好处是替代文本对所有人可获得,包含不使用辅助技术的视觉用户。但是对时间有限制的控件不适合使用aria-describedby,因为一些辅助技术会在读出alt属性之后立即读出aria-describedby的内容,而longdesc的实现是需要用户采取行动来阅读额外的描述。

像aria-describedby,aria-labelledby可以接收很多个id,只想网页中的不同区域的文本,在id顺序方面还是有限制的。


样例

样例1:描述图片,aria-describedby怎样提供长描述



效果

麦克白夫人

这幅画可以追溯到1730,是油画上的油画。它是由简人创建,并代表…


无障碍效果

各读屏、各浏览器的支持效果

测试人:

争渡、IE11:
用光标访问,分成两段文本朗读第一段:“麦克白夫人 图形 不可用”第二段:“这幅画可以追溯到1730,是油画上的油画。它是由简人创建,并代表…”;
永德、IE11:
用光标访问分两段朗读,第一段:“麦克白夫人 图形”,第二段:“麦克白夫人 图形 这幅画可以追溯到1730,是油画上的油画。它是由简人创建,并代表…”;
NVDA、IE11:
用光标访问,分成两段,第一段:“图形 麦克白夫人”,第二段:“麦克白夫人 图形 这幅画可以追溯到1730,是油画上的油画。它是由简人创建,并代表…”;
永德、chrome:
用光标访问分两段文本,第一段“麦克白夫人 图形”,
第二段:“这幅画可以追溯到1730,是油画上的油画。它是由简人创建,并代表…”;
NVDA、chrome:
用光标访问,分成两段,第一段:“图形 麦克白夫人”,
第二段:“这幅画可以追溯到1730,是油画上的油画。它是由简人创建,并代表…”;
NVDA、Firefox:

用光标访问,分成两段,第一段:“麦克白夫人”,第二段:“这幅画可以追溯到1730,是油画上的油画。它是由简人创建,并代表…”;
voiceover、chrmoe:
分别朗读为:麦克白夫人,图像、这幅画可以追溯到1730,是油画上的油画。它是由简人创建,并代表
voiceover、Safari:
分别朗读为:麦克白夫人,图像、这幅画可以追溯到1730,是油画上的油画。它是由简人创建,并代表