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/