title

HTMLimg标签的alt属性和title属性使⽤介绍

当浏览器卖主扭曲了标准并且⾃顾⾃的不按规则去做⼀些事，他们可能会造成⼀些问题，或者⾄少产⽣了混淆。例⼦之⼀就是

⼀些浏览器处理alt属性（⼀般会被错误的称作alt标签）的⽅式，⽐如拥有⼤量⽤户的Windows的IE浏览器。

替换⽂字（alttext）并不是⽤来做提⽰（tooltip），或者更加确切的说，它并不是为图⽚提供额外说明信息的。相反地，title

属性才应该⽤来为元素提供额外说明信息。这些信息在⼤部分图像浏览器⾥显⽰为提⽰（tooltip），虽然制造商可以任意采取

其他⽅式渲染title属性的⽂字。

很多⼈看来对这两个属性感到迷惑（最近这个问题在WebStandardsGroup邮件列表⾥变多了），所以我写下我的想法，如

何去⽤它们。

alt属性

为不能显⽰图像、窗体或applets的⽤户代理（UA），alt属性⽤来指定替换⽂字。替换⽂字的语⾔由lang属性指定。来源：

Howtospecifyalternatetext.

Alt属性（注意是“属性”⽽不是“标签”）包括替换说明，对于图像和图像热点是必须的。它只能⽤在img、area和input元素中

（包括applet元素）。对于input元素，alt属性意在⽤来替换提交按钮的图⽚。⽐如：

alt="Submit"/>.

使⽤alt属性是为了给那些不能看到你⽂档中图像的浏览者提供⽂字说明。这包括那些使⽤本来就不⽀持图像显⽰或者图像显

⽰被关闭的浏览器的⽤户，视觉障碍的⽤户和使⽤屏幕阅读器的⽤户。替换⽂字是⽤来替代图像⽽不是提供额外说明⽂字的。

在写替换⽂字前仔细想想，保证那些⽂字确实为那些看不到图像的⼈提供了说明信息，并且在上下⽂中有肉炒蘑菇 意义。对于那些装饰

性的图⽚年终奖税率表 可以使⽤空的值（alt=""，引号中间没有空格），⽽不是使⽤不相关的替换⽂字⽐如“bluebullet”或者“”。不

要忽略它，如果你忽略了，那么⼀些屏八宝饭怎么做 幕阅读器会直接阅读图像⽂件的⽂件名，那些⽂字浏览器，⽐如Lynx会显⽰图像⽂件

的⽂件名，⽽那对于你的浏览者就没什么⽤了。

包含⽂字的图像图⽚设置替换⽂字是最简单的，图像中包含的⽂字⼀般来说就可以作为alt属性值。

⾄于替换⽂字的长度，看看WCAG2.0（⽹站内容可⽤性指南2.0）是怎么说的：

Alt属性值得长度必须少于100个英⽂字符或者⽤户必须保证替换⽂字尽可能的短。

我把它理解为“尽可能短，尽需要长”。

即使你想让它显⽰为提⽰（tooltip），也不要给⽂字元素使⽤alt属性，这并不是它的⽤法。⾄今据我所知，那样做仅能在

Windows的IE浏览器和古⽼的Netscape4.*（windows版本）有效。没有⼀个Mac的浏览器会将它显⽰为提⽰（tooltip）。

当浏览器把替换⽂字显⽰为提⽰（tooltip）后，那些错误使⽤alt属性的⾏为也受到了⿎励。⼀些⼈开始写促进睡眠的食物 ⽆意思的替换⽂字，

因为他们趋向于认为它是⼀个额外的说明信息，⽽不是不能显⽰图像的替换。其他⼈可能不想让提⽰（tooltip）出现，然后就

完全忽略了写alt属性值。这些错误的做法，都给那些不能看到图像的浏览者造成了困难。

额外的说明信息和⾮本质的信息请使⽤title属性。

title属性

title属性为设置该属性的元素提供建议性的信息。

来源:Thetitleattribute.

title属性可以⽤在除了ba，bafont，head，html，meta，param，script和title之外的所有标签。后羿射日的故事 但是并不是必须的。可能

这正是为什么很多⼈不明⽩何时使⽤它。

使⽤title属性提供⾮本质的额外信息。⼤部分的可视化浏览器在⿏标悬浮在特定元素上时显⽰title⽂字为提⽰信息（tool

tip），然⽽这⼜由制造商来决定如何渲染title⽂字。⼀些浏览器会将title⽂字显⽰在状态栏⾥。⽐如早期版本的Safari浏览器。

title属性有⼀个很好的⽤途，即为链接添加描述性⽂字，特别是当连接本⾝并不是⼗做运动的英语 分清楚的表达了链接的⽬的。这样就使得

访问者知道那些链接将会带他们到什么地⽅，他们就不会加载⼀个可能完全不感兴趣的页⾯。另外⼀个潜在的应⽤就是为图像

提供额外的说明信息，⽐如⽇期或者其他⾮本质的信息。

title属性值可以⽐alt属性值设置的更长。不过要注意的是，有些浏览器会截断过长的⽂字（⽐如⼯具提⽰或其他）。⽐如

Mozilla核⼼的浏览器只能显⽰最先的60个字符。这被认为是⼀个Mozillabug，这是你要注意的。

使⽤前先考虑

我的建议是保证替换⽂字（alttext）精要。在⼤多数的应⽤⾥，都应该被留⽩，alt=""（注意两引号中没有空格）。想想那些

图像，为那些浏览者提供了什么样的信息，你应该⽤什么⽂字去描述它，或者你该为看不到图像的⼈提供什么信息？将替换

⽂字写成“照⽚：站在⼤楼外的CEO，穿着灰⾊西装和⿊⾊领带，望着天”对于看不到图像的⼈真的有帮助？如果你觉得是，那

么你就写吧。在很多情况下，我觉得让替换⽂字留⽩⽐较好。

对于title属性，⽐较难于给出严格的使⽤说明。我⼤部分⽤在那些不能⾃我释意的链接上，⽐如同⼀页⾯上的相同的链接⽂

字，不同的链接页⾯。有时候也为⼀些按钮或者表单元素提供更多的说明⽂字。

更长的描述

当⼀个图⽚需要更加长的描述，⽽超过alt属性的限制，那么还有⼀些选择。

longdesc属性可以⽤来提供链接到⼀个包含图⽚⽂字描述的单独页⾯。这就意味着把浏览者链接到另外的页⾯，这可能会造

成理解上的困难。另外浏览器对于longdesc属性的⽀持也是不⼀致的，并且不是⾮常康妇软膏 好。

longdesc属作文的英语 性可以包含⼀个链接到当前⽂档的其他部分（锚点）来取代链接到另外的页⾯。在Accessibilityfootnotes,Andy

Clarke很好的解释说明了如何应⽤。

描述链接（Dlinks）可以⽤来补充longdesc。⼀个描述链接就是⼀个常规的链接，连接到含有替换⽂字的页⾯。该链接被置

于图像的旁边，并且在所有浏览器中都是可是的。对于它的有效性⼈们有很多不同意见，我的个⼈意见不⼤喜欢这个注意。

WCAG也是，在他们的⼯作草案HTMLTechniquesforWCAG2.0中，描述链接是被“不赞成”的。

如果对图⽚的长的描述对于任何浏览者都有⽤，那么你得考虑让它简单的显⽰在同⼀个⽂档⾥⾯，⽽不是链接到其他页⾯⾥或

者藏起来。这样每个⼈都可以阅读到。这是⼀种简单低技术含量的⽅法。