为image mape的area元素提供文本替代_20160412


说明

该技巧的目的是为image map的选择区域提供相同目的的替代文本。image map是一个被划分为若干个可选择区域的图片,可选择区域为area元素。每一个area是一个链接,可以链接到页面外或页面外。每一个area的alt属性与图像的对应选择区域的功能目的相同。


样例

样例1:使用alt属性为area元素添加目的描述

一个网页中有很多导航区域,可以使用aria-label来区分。



效果

图书馆领域。选择一个区域
有关该地区的更多信息。 参考 音视频馆

无障碍效果

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

测试人:wmq

争渡、IE11:
参考 链接区域类型: RECT 链接 音视频馆 链接区域类型: RECT 链接
永德、IE11:
参考 链接 html 音视频馆 链接 html
NVDA、IE11:
无朗读
永德、chrome:
无朗读
NVDA、chrome:
无朗读
NVDA、Firefox:
无朗读
voiceover、chrmoe:
无朗读
voiceover、Safari:

链接 参考 链接 音视频馆