如何为非文本内容添加合适的替代信息1. 如何为非文本内容添加合适的替代
信息
为非文本内容添加替代信息是无障碍的第一准则,但也是最难把握的一个准则,因为添加不
是目的,目的是适当的添加。目前网络中到处充斥着不正确、不妥当的内容,因为内容的设
置和负责人自身的意识有很大关联。今天我们的目的就是介绍下如何为图片添加恰当的替代
信息。
今天我们只是讨论为图片添加信息,这些方法同样适用与其它非文本内容。
替代信息作用:
•为读屏软件提供信息(视觉障碍、某一特点缺陷用户)
•不支持图片显示的代理软件(浏览器)
•为搜索引擎提供有意义、描述的内容
•纯文本浏览
要添加替代信息的原因:读屏软件和代理软件无法分析图片,了解图片展示的信息。所以,
我们必须为用户提供此图片在当前页面中所呈现出的内容和功能 。
用户使用读屏软件定位到页面的图片时,读屏软件将读出 alt 属性的内容,如果此图片没有
设置 alt 属性,读屏软件就会独处此图片或这个页面的文件名(不同读屏软件处理方式不
同)。所以,务必谨记的前提的前提:任何图片必须包含 alt 属性
两种途径提供替代信息:
•img 标签的 alt 属性
•当前页面中已有的内容,图片周边信息
也就是说 alt 属性不是提供替代信息的唯一途径。还可以提供图片周边的和图片所在页面的
信息。必要的情况下还可以使用 longdesc 属性链接到一个独立的页面,提供更长更全面的
帮助信息。
什么样的替代信息才合适?
上下文关联
当考虑为图片添加替代信息时,必须立足于图片所在的上下文。一张相同的图片放到不同的
上下文中,所添加的替代内容很有可能是不一样的。
alt 内容的一些准则:
•精确展现图片所体现的信息或功能
•简洁明了
2. •重要的内容要先说(由页面上下文确定哪些内容时重点)
•不累赘,不提供和周围信息重复的内容
•不要使用“图片..”之类语句描述图片:用户没有必要知道这个信息是图片展示出来的
例一
他通称为本· 拉登或本· 拉丹,是基地组织的首领,现被指为美国 2001 年“9 · 11”袭击事件
的幕后总策划人,并被放在美国联邦调查局通缉名单的首位,被广泛认为是“世界上最大的
通缉犯”。
此图可选描述:
1.本拉登图片
2.本拉登,美国联邦调查俱首位通缉犯
3.alt=“”
4.本拉登
最佳答案:4。
1,无需说明是图片;2,仔细阅读下面的内容,发现了吧--内容重复;3、少了必要的说
明。请把 4 的内容放进去整句读一读就了解。
例二
3. 本拉登
他通称为本· 拉登或本· 拉丹,是基地组织的首领,现被指为美国 2001 年“9 · 11”袭击事件
的幕后总策划人,并被放在美国联邦调查局通缉名单的首位,被广泛认为是“世界上最大的
通缉犯”。
此图可选描述:
1.本拉登
2.alt=“”
3.图片
4.无 alt
最佳答案:2。
1,信息重复; 3、无意义内容;4、如果不理解请返回上文 ^_^
例三
本拉登
链接仅仅包含图片,文字“本拉登”在链接外。
此图可选描述:
1.本拉登
2.alt=“”
3.更多
4.本拉登百度百科
最佳答案:4,让用户清晰了解到这个链接的功能和内容。
4. 1,内容和下面的文本信息重复,并且没有说明此图片的功能;2、图片作为链接时,图片替
代信息必须体现此图所代表的功能,并且 alt 不能为空,除非在这个链接中提供了其它信息
已描述清楚此链接的功能。比如,下面的本拉登包含在链接里时,这是最佳选择;3、内容
不清晰。
当然,如果我们变换思考的方向,由图片的我们认为 alt 应该只是体现图片的意义,功能的
信息写在 title 上,那么可以选择这样:
<a href="#" title=”百度百科”><img src="ladeng.jpg"
alt="本拉登"></a>
所以又是那句老话,权衡再权衡。重要的是:我们是否让所有用户公平的获得信息。
如果可以,避免使用“链接到”‘点击图片’等信息,因为屏幕阅读器能分辨出这是一个链接
功能性
例四
此图 “免费注册 ”可选描述:
1.免费注册
2.链接到免费注册
3.alt=“”
4.无 alt
最佳答案:1。
我们都懂的。
例五
这个箭头是个独立链接
5. 此图可选描述:
1.更多
2.大家电
3.alt=“”
4.更多大家电
最佳答案:4。
1、想象下当你先听到大家电,接着听到更多,然后是生活电器,你能快速分辨出这里的更
多指的是大家电还是生活电器?
上图的更多,我会选择在更多所在的这个链接上添加 title=”淘宝服务”
例六
pdf 图片包含在 Download the Employment Application 这个链接中。
此图可选描述:
1.Employment Application
2.pdf 文件
3.pdf 图标
4.图片内容链接已经提供了,这里只要 alt=””
最佳答案:2。
1、信息重复; 3、解释了图片,当这个信息更多只是让用户思考何为图标;4、回想下我
们之前一点:图片的功能。对的,我想你明白的
那么,如果这个链接中仅仅包含了 pdf 这个图片,这里的描述应该是什么呢?
对的,答案应该是:“Download the Employment Application in PDF format”
装饰性
装饰性图片指的是这个图片的存在不是用于提供内容,而仅是因为装饰页面、或修饰内容。
例七
6. 此图可选描述:
1.虚线
2.分割线
3.alt=“”
最佳答案:3。
我们都懂的。
记住,如果这个图片仅仅是作为装饰,那么我们应该先考虑使用 css 的把 backgound
例八
此图可选描述:
1.摩托罗拉手机
2.摩托罗拉旗舰店开业
3.alt=“”
如何判断上图,需要权衡
最佳答案:
如果,手机和下面的文字是一张图片,那么选项 2 是最佳答案;
如果,这个链接中是包含了上面这个手机图和下面这个文件,那么我们应该选择选项 3。
其它
1、图片按钮
<input type="image" alt="Submit Search">
alt 必须说明清楚,这个按钮的功能是什么,一般按图片上的文本信息写就好。
7. 2、图片地图
当使用图片地图时,主要的图片必须包含 alt 属性,area 可以使用 alt 或 title,重要是必须提
供内容
3、logo
alt="Acme Company Logo" 这个 logo 是没有必要的
4、复杂的图片信息,如图表
<a href="chart_description.htm"><img src="chart.jpg"
longdesc="chart_description.htm" alt="Chart showing
revenue increases over the last five years with link to
description of the data"></a>
总结
添加替代信息是我们最容易了解也是最难把我的一个无障碍原则,以下是之前内容的总结:
•所有 img 标签必须包含 alt
•替代性内容可以是 alt,也可以是周边信息
•必须供此图片在当前页面中所呈现出的 内容和功能
•简洁
•不重复,如果上下文已经有内容,无需多说一次
•不要“图片..”
•依据上下文选择替代内容
•作为功能的图片必须解释清楚这个图片的功能是什么(那个 pdf)
•装饰性图片必须 alt=“”
•重要的内容先说
←
←验证是否为图片添加了适当的替代信息,最靠谱的办法就是自己用耳朵听一遍吧。firefox 中也提
供了很多插件帮助我们快速验证页面是否存在无障碍 bug:
←1、wave http://wave.webaim.org/?lang=en
2、Accessibility https://addons.mozilla.org/firefox/5809/