恰当使用替代文字

例7
Download the Employment Application
例7图片的最合适“alt”属性是什么?
A.“就业申请表”
B.“PDF文件”
C.“PDF图标”
D.图片内容已经在语境中体现了,所alt=””合适。
注意,图片链接内。如果不在链接内,”alt”文字应该就不一样了。由于图片提供了有关链接功能的额外信息,它在链接内,连同链接一起被读取很重要。因为访问链接经常脱离了语境。
选项A(就业申请表)在此语境中显得多余,所以不是最合适的选择。选项B最合适—它清晰说明了图片代表的内容–这个链接是链到PDF文件。这个功能(下载就业申请表)已经在链接文字中体现出来了,所以没必要包含在“alt”属性中。选项C(PDF图标)描述了图片自身,但在此语境中不是最佳选择,在另一个语境中,让用户知道这个图片的确是一个图标,这很重要,在这种情况下,在“alt”属性中添加“图标”可能合适。选项D(空或赋予空值alt属性)没有提供图片表达的重要信息。
在这里要注意,如果图标本身链接到文档,替换文字应该包括图片(链接)功能和内容信息。类似于“下载PDF格式的就业申请书”。“PDF格式”就不够了,尤其是如果很多文件链接都是这个类型。那样的话,使用屏幕阅读器的用户在页面中浏览链接时听到的全是“PDF格式、PDF格式、PDF格式……”。一般来说,如果同一张图片在一个页面中被多次使用而链接到不同位置,链接内的替换文字应该不同。
装饰性图片Decorative Images
装饰性图片不表达重要内容,经常用于布局或非信息目的,也不在链接内显示。几乎所有情况下,空白和装饰性图片的“alt”属性应该为空。
例8
内容文字。
页脚文字。
例8水平分割线的“alt”属性应该是什么?
A.“装饰性线条”
B.“页脚起点”
C.“分割线”
D.alt=””足够
由于图片没有表达任何内容,也不在链接内,选项D应该是最佳选择。不需要图片描述。
注意
如果图片仅仅用于装饰目的,应该将它与页面内容分开,使用Css把它作为背景图片。这样,图片就不需要替换文字了,也可以把图片与页面语义和结构流分开。
例9
我们承诺提供世界上最好的服务。我们的团队经过专业培训,在合作过程中,可以提供最优质客户服务。客户满意是我们的首要任务,并且得到保证。
例9图片的“alt”属性应该是什么?
A.“握手”
B.“商人握手完成合作”
C. alt=””足够。
D.“我们保证专业服务”
分析这个例子时,要确定图片是否表达了重要内容。我更赞成本例没有表达重要内容。目前网站实践中,许多此类图片都被赋予描述性替换文字,即使图片没有提供什么内容。非空白或非普通装饰性图片需要替换文字,这是错误假设。选项C(alt=””)是最佳选项,因为这个图片没有表达相关或重要信息。选项A和选项B是对图片的描述,但表达的内容和图片本身所表达的内容不等价,这个图片纯粹是装饰性。选项D明显不正确,值得注意的是,额外信息经常被添加到“alt”属性中,或为搜索引擎提供额外关键词。这类做法不是使用替换文字的合适方法。
高级图片
一些情况下,确定替换文字更难。对于所有图片,用户测试、屏幕阅读器或只读取文本的浏览器测试能帮助确定使用替换文字最合适的方法。
表单图片按钮
表单图片按钮必须有描述按钮功能的“alt”属性。图片按钮经常被用作标准格式按钮的醒目版或缩略版。替换文字应该描述选择后,按钮会做什么,如“搜索”,“提交”,“注册”,“订购”等。例如,如果图片按钮在网站搜索表单中,是合适写法。
图片地图
使用客户端图片地图时,主要图片必须有“alt”属性。“alt”属性应该表达出图片所传达的任何内容,但不是表达所有图片地图热点。例如,有张图片地图包含纽约州每个区域热点,图片“alt”属性应该是“纽约州”。如果主要图片没有表达内容,而主要是容器(如,导航条),那么alt=”” 是合适的。
每个图片地图热点(区域元素)必须有同等“alt”属性。因为热点可点击,每个热点都需要有替换文字来描述热点功能。服务器端的图片地图中热点不能赋予替换文字,它们也不可以通过键盘操作,不需要“alt”属性。
图片切片
有时为了方便网站设计,大图片被切割成许多小图片。许多图片切片在一起来表达内容时,内容必须展示给用户。一般通过在最大图片或最突出=的图片的“alt”属性中添加替换文字来表达内容。重复替换文字,把替换文字分散在许多图片的“alt”属性或根本没有替换文字,这都不合适。如果图片切片在链接内,描述链接的替换文字必须在图片的“alt”属性 中、同一链接内的另一图片的“alt”属性中或在同一链接内的文本中。每个链接都要包含功能性文字来描述这些链接功能。
背景图片
不可能直接在背景图片中添加替换文字。图片所表达的内容不应该被放置在页面内或元素背景中。然而,背景图片可以用作装饰性图片,把图片从页面内容流中分离开,“alt”属性变为空。
商标
网站上放置能够链接到网站首页的商标是普遍做法。由于这是常规做法,为图片提供替换文字,如公司名称(alt=”Acme Company)就足够了。把真实商标识别为商标(alt=”Acme Company Logo”)没有必要。内容和功能不是“商标”。开发人员经常把图片“alt”属性设为“首页”(alt=”Acme Company – home),即使图片都一致放在页面顶部,替换内容合适,这些额外信息也没有必要。
综合图片
如果综合图片的同等替换文字,如图表,不能只使用一两个短句,又不能通过页面语境表达,这些替换需要在别的地方提供。通过链接到单独网页来提供较长描述,“longdesc”属性也可以在图片中使用,即使还没有获得广泛支持。图片替换文字仍然应该描述图片整体内容。如果图片链接到较长描述,这些信息也可以在“alt”属性中提供。Chart showing revenue increases over the last five years with link to description of the data
虽然稍微有点长,但这些替换文字表达了图片整体内容,告诉用户描述信息可用。
总结
虽然替换文字是影响网站可达性的重要问题,但目前还存在错误使用替换文字的现象。网站人员根据下列基本原则设置“alt”属性,可以使视障用户更容易访问网站内容。图片加入替换文字是最容易的可达性原则之一,也最难掌握。
替换文字一般在“alt”属性中或在图片周围语境中提供。
每张图片必须有“alt”属性。
替换文字应具备以下两点:
表达图片内容和功能
充足
替换文字不应该:
冗余(与相邻或正文文字相同)
使用“……图片”之类短语
合适的替换文字更依赖于图片语境。
功能性图片的“alt”文字应该描述其功能和内容。
装饰性图片仍然需要“alt”属性,但值是空值(alt=””)
如果能够合理使用替换文字,网站可达性会有明显提高。

发表评论

电子邮件地址不会被公开。 必填项已用*标注