作者:JunChen 2005-5-23 12:00:35
原文:http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/
翻译:JunChen
首发:http://blog.handsbrain.com/junchen/archive/2005/05/21/3355.aspx
版权:本文版权归译者Junchen所有,转载请先联系译者.
当浏览器卖主扭曲了标准并且自顾自de不按规则去做一些事,他们可能会造成一些问题,或者至少产生了混淆.例子之一就是一些浏览器处理alt属性(一般会被错误de称作alt标签)de方式,比如拥有大量用户deWindowsdeIE浏览器.
替换文字(alt text)并不是用来做提示(tool tip),或者更加确切de说,它并不是为图片提供额外说明信息de.相反地,title属性才应该用来为元素提供额外说明信息.这些信息在大部分图像浏览器里显示为提示(tool tip),虽然制造商可以任意采取其他方式渲染title属性de文字.
很多人看来对这两个属性感到迷惑(最近这个问题在Web Standards Group邮件列表里变多了), 所以我写下我de想法,如何去用它们.
alt属性
为不能显示图像、窗体或appletsde用户代理(UA),alt属性用来指定替换文字.替换文字de语言由lang属性指定.
来源:How to specify alternate text.
Alt属性(注意是“属性”而不是“标签”)包括替换说明,对于图像和图像热点是必须de.它只能用在img、area和input元素中(包括applet元素).对于input元素,alt属性意在用来替换提交按钮de图片.比如:<input type=”image” src=”image.gif” alt=”Submit” />.
使用alt属性是为了给那些不能看到您文档中图像de浏览者提供文字说明.这包括那些使用本来就不支持图像显示或者图像显示被关闭de浏览器de用户,视觉障碍de用户和使用屏幕阅读器de用户.替换文字是用来替代图像而不是提供额外说明文字de.
在写替换文字前仔细想想,保证那些文字确实为那些看不到图像de人提供了说明信息,并且在上下文中有意义.对于那些装饰性de图片可以使用空de值(alt=”",引号中间没有空格),而不是使用不相关de替换文字比如“blue bullet”或者“spacer.gif”.不要忽略它,如果您忽略了,那么一些屏幕阅读器会直接阅读图像文件de文件名,那些文字浏览器,比如Lynx会显示图像文件de文件名,而那对于您de浏览者就没什么用了.
包含文字de图像图片设置替换文字是最简单de,图像中包含de文字一般来说就可以作为alt属性值.
至于替换文字de长度,看看WCAG 2.0(网站内容可用性指南2.0)是怎么说de:
Alt属性值得长度必须少于100个英文字符或者用户必须保证替换文字尽可能de短.
我把它理解为“尽可能短,尽需要长”.
即使您想让它显示为提示(tool tip),也不要给文字元素使用alt属性,这并不是它de用法.至今据我所知,那样做仅能在WindowsdeIE浏览器和古老deNetscape 4.*(windows版本)有效.没有一个Macde浏览器会将它显示为提示(tool tip).
当浏览器把替换文字显示为提示(tool tip)后,那些错误使用alt属性de行为也受到了鼓励.一些人开始写无意思de替换文字,因为他们趋向于认为它是一个额外de说明信息,而不是不能显示图像de替换.其他人可能不想让提示(tool tip)出现,然后就完全忽略了写alt属性值.这些错误de做法,都给那些不能看到图像de浏览者造成了困难.
额外de说明信息和非本质de信息请使用title属性.
title属性
title属性为设置该属性de元素提供建议性de信息.
来源: The title attribute.
title属性可以用在除了base,basefont,head,html,meta,param,script和title之外de所有标签.但是并不是必须de.可能这正是为什么很多人不明白何时使用它.
使用title属性提供非本质de额外信息.大部分de可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息(tool tip),然而这又由制造商来决定如何渲染title文字.一些浏览器会将title文字显示在状态栏里.比如早期版本deSafari浏览器.
title属性有一个很好de用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚de表达了链接de目de.这样就使得访问者知道那些链接将会带他们到什么地方,他们就不会加载一个可能完全不感兴趣de页面.另外一个潜在de应用就是为图像提供额外de说明信息,比如日期或者其他非本质de信息.
title属性值可以比alt属性值设置de更长.不过要注意de是,有些浏览器会截断过长de文字(比如工具提示或其他).比如Mozilla核心de浏览器只能显示最先de60个字符.这被认为是一个Mozilla bug,这是您要注意de.
使用前先考虑
我de建议是保证替换文字(alt text)精要.在大多数de应用里,都应该被留白,alt=”"(注意两引号中没有空格). 想想那些图像,为那些浏览者提供了什么样de信息,您应该用什么文字去描述它,或者您该为看不到图像de人提供什么信息? 将替换文字写成“照片:站在大楼外deCEO,穿着灰色西装和黑色领带,望着天”对于看不到图像de人真de有帮助?如果您觉得是,那么您就写吧.在很多情况下,我觉得让替换文字留白比较好.
对于title属性,比较难于给出严格de使用说明.我大部分用在那些不能自我释意de链接上,比如同一页面上de相同de链接文字,不同de链接页面.有时候也为一些按钮或者表单元素提供更多de说明文字.
更长de描述
当一个图片需要更加长de描述,而超过alt属性de限制,那么还有一些选择.
longdesc属性可以用来提供链接到一个包含图片文字描述de单独页面.这就意味着把浏览者链接到另外de页面,这可能会造成理解上de困难.另外浏览器对于longdesc属性de支持也是不一致de,并且不是非常好.
longdesc属性可以包含一个链接到当前文档de其他部分(锚点)来取代链接到另外de页面.在Accessibility footnotes, Andy Clarke很好de解释说明了如何应用.
描述链接(D links)可以用来补充longdesc.一个描述链接就是一个常规de链接,连接到含有替换文字de页面.该链接被置于图像de旁边,并且在所有浏览器中都是可是de.对于它de有效性人们有很多不同意见,我de个人意见不大喜欢这个注意.WCAG也是,在他们de工作草案HTML Techniques for WCAG 2.0中,描述链接是被“不赞成”de.
如果对图片de长de描述对于任何浏览者都有用,那么您得考虑让它简单de显示在同一个文档里面,而不是链接到其他页面里或者藏起来.这样每个人都可以阅读到.这是一种简单低技术含量de方法.
更多信息
想了解更多关于alt,title和longdesc属性?看这里:
Guidelines on alt texts in img elements
Writing good ALT text
Accessible alternatives
Accessibility footnotes
The image problem
Title Attribute – Your Take
Using link Titles to Help Users Predict Where They Are Going
How to specify alternate text
The title attribute