alt属性和title属性

alt属性和title属性

作者：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所有，转载请先联系译者。
当浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事，他们可能会造成一些问题，或者至少产生了混淆。例子之一就是一些浏览器处理alt属性（一般会被错误的称作alt标签）的方式，比如拥有大量用户的Windows的IE浏览器。

替换文字（alt text）并不是用来做提示（tool tip），或者更加确切的说，它并不是为图片提供额外说明信息的。相反地，title属性才应该用来为元素提供额外说明信息。这些信息在大部分图像浏览器里显示为提示（tool tip），虽然制造商可以任意采取其他方式渲染title属性的文字。

很多人看来对这两个属性感到迷惑（最近这个问题在Web Standards Group邮件列表里变多了）， 所以我写下我的想法，如何去用它们。

alt属性

为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。
来源：How to specify alternate text.

Alt属性（注意是“属性”而不是“标签”）包括替换说明，对于图像和图像热点是必须的。它只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。比如：<input type="image" src="aW1hZ2UuZ2lm" alt="U3VibWl0" />.

使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。

在写替换文字前仔细想想，保证那些文字确实为那些看不到图像的人提供了说明信息，并且在上下文中有意义。对于那些装饰性的图片可以使用空的值（alt="Iu+8jOW8leWPt+S4remXtOayoeacieepuuagvO+8ie+8jOiAjOS4jeaYr+S9v+eUqOS4jeebuOWFs+eahOabv+aNouaWh+Wtl+avlOWmguKAnGJsdWUgYnVsbGV04oCd5oiW6ICF4oCcc3BhY2VyLmdpZuKAneOAguS4jeimgeW/veeVpeWug++8jOWmguaenOS9oOW/veeVpeS6hu+8jOmCo+S5iOS4gOS6m+Wxj+W5lemYheivu+WZqOS8muebtOaOpemYheivu+WbvuWDj+aWh+S7tueahOaWh+S7tuWQje+8jOmCo+S6m+aWh+Wtl+a1j+iniOWZqO+8jOavlOWmgkx5bnjkvJrmmL7npLrlm77lg4/mlofku7bnmoTmlofku7blkI3vvIzogIzpgqPlr7nkuo7kvaDnmoTmtY/op4jogIXlsLHmsqHku4DkuYjnlKjkuobjgII8L1A+DQo8UD7ljIXlkKvmloflrZfnmoTlm77lg4/lm77niYforr7nva7mm7/mjaLmloflrZfmmK/mnIDnroDljZXnmoTvvIzlm77lg4/kuK3ljIXlkKvnmoTmloflrZfkuIDoiKzmnaXor7TlsLHlj6/ku6XkvZzkuLphbHTlsZ7mgKflgLzjgII8L1A+DQo8UD7oh7Pkuo7mm7/mjaLmloflrZfnmoTplb/luqbvvIznnIvnnItXQ0FHIDIuMO+8iOe9keermeWGheWuueWPr+eUqOaAp+aMh+WNlzIuMO+8ieaYr+aAjuS5iOivtOeahO+8mjwvUD4NCjxQPkFsdOWxnuaAp+WAvOW+l+mVv+W6puW/hemhu+WwkeS6jjEwMOS4quiLseaWh+Wtl+espuaIluiAheeUqOaIt+W/hemhu+S/neivgeabv+aNouaWh+Wtl+WwveWPr+iDveeahOefreOAgjxCUj7miJHmiorlroPnkIbop6PkuLrigJzlsL3lj6/og73nn63vvIzlsL3pnIDopoHplb/igJ3jgII8L1A+DQo8UD7ljbPkvb/kvaDmg7PorqnlroPmmL7npLrkuLrmj5DnpLrvvIh0b29sIHRpcO+8ie+8jOS5n+S4jeimgee7meaWh+Wtl+WFg+e0oOS9v+eUqGFsdOWxnuaAp++8jOi/meW5tuS4jeaYr+Wug+eahOeUqOazleOAguiHs+S7iuaNruaIkeaJgOefpe+8jOmCo+agt+WBmuS7heiDveWcqFdpbmRvd3PnmoRJRea1j+iniOWZqOWSjOWPpOiAgeeahE5ldHNjYXBlIDQuKu+8iHdpbmRvd3PniYjmnKzvvInmnInmlYjjgILmsqHmnInkuIDkuKpNYWPnmoTmtY/op4jlmajkvJrlsIblroPmmL7npLrkuLrmj5DnpLrvvIh0b29sIHRpcO+8ieOAgjwvUD4NCjxQPuW9k+a1j+iniOWZqOaKiuabv+aNouaWh+Wtl+aYvuekuuS4uuaPkOekuu+8iHRvb2wgdGlw77yJ5ZCO77yM6YKj5Lqb6ZSZ6K+v5L2/55SoYWx05bGe5oCn55qE6KGM5Li65Lmf5Y+X5Yiw5LqG6byT5Yqx44CC5LiA5Lqb5Lq65byA5aeL5YaZ5peg5oSP5oCd55qE5pu/5o2i5paH5a2X77yM5Zug5Li65LuW5Lus6LaL5ZCR5LqO6K6k5Li65a6D5piv5LiA5Liq6aKd5aSW55qE6K+05piO5L+h5oGv77yM6ICM5LiN5piv5LiN6IO95pi+56S65Zu+5YOP55qE5pu/5o2i44CC5YW25LuW5Lq65Y+v6IO95LiN5oOz6K6p5o+Q56S677yIdG9vbCB0aXDvvInlh7rnjrDvvIznhLblkI7lsLHlrozlhajlv73nlaXkuoblhplhbHTlsZ7mgKflgLzjgILov5nkupvplJnor6/nmoTlgZrms5XvvIzpg73nu5npgqPkupvkuI3og73nnIvliLDlm77lg4/nmoTmtY/op4jogIXpgKDmiJDkuoblm7Dpmr7jgII8L1A+DQo8UD7pop3lpJbnmoTor7TmmI7kv6Hmga/lkozpnZ7mnKzotKjnmoTkv6Hmga/or7fkvb/nlKh0aXRsZeWxnuaAp+OAgjwvUD4NCjxQPnRpdGxl5bGe5oCnPC9QPg0KPFA+dGl0bGXlsZ7mgKfkuLrorr7nva7or6XlsZ7mgKfnmoTlhYPntKDmj5Dkvpvlu7rorq7mgKfnmoTkv6Hmga/jgII8QlI+5p2l5rqQOiBUaGUgdGl0bGUgYXR0cmlidXRlLjwvUD4NCjxQPnRpdGxl5bGe5oCn5Y+v5Lul55So5Zyo6Zmk5LqGYmFzZe+8jGJhc2Vmb25077yMaGVhZO+8jGh0bWzvvIxtZXRh77yMcGFyYW3vvIxzY3JpcHTlkox0aXRsZeS5i+WklueahOaJgOacieagh+etvuOAguS9huaYr+W5tuS4jeaYr+W/hemhu+eahOOAguWPr+iDvei/meato+aYr+S4uuS7gOS5iOW+iOWkmuS6uuS4jeaYjueZveS9leaXtuS9v+eUqOWug+OAgjwvUD4NCjxQPuS9v+eUqHRpdGxl5bGe5oCn5o+Q5L6b6Z2e5pys6LSo55qE6aKd5aSW5L+h5oGv44CC5aSn6YOo5YiG55qE5Y+v6KeG5YyW5rWP6KeI5Zmo5Zyo6byg5qCH5oKs5rWu5Zyo54m55a6a5YWD57Sg5LiK5pe25pi+56S6dGl0bGXmloflrZfkuLrmj5DnpLrkv6Hmga/vvIh0b29sIHRpcO+8ie+8jOeEtuiAjOi/meWPiOeUseWItumAoOWVhuadpeWGs+WumuWmguS9lea4suafk3RpdGxl5paH5a2X44CC5LiA5Lqb5rWP6KeI5Zmo5Lya5bCGdGl0bGXmloflrZfmmL7npLrlnKjnirbmgIHmoI/ph4zjgILmr5TlpoLml6nmnJ/niYjmnKznmoRTYWZhcmnmtY/op4jlmajjgII8L1A+DQo8UD50aXRsZeWxnuaAp+acieS4gOS4quW+iOWlveeahOeUqOmAlO+8jOWNs+S4uumTvuaOpea3u+WKoOaPj+i/sOaAp+aWh+Wtl++8jOeJueWIq+aYr+W9k+i/nuaOpeacrOi6q+W5tuS4jeaYr+WNgeWIhua4healmueahOihqOi+vuS6humTvuaOpeeahOebrueahOOAgui/meagt+WwseS9v+W+l+iuv+mXruiAheefpemBk+mCo+S6m+mTvuaOpeWwhuS8muW4puS7luS7rOWIsOS7gOS5iOWcsOaWue+8jOS7luS7rOWwseS4jeS8muWKoOi9veS4gOS4quWPr+iDveWujOWFqOS4jeaEn+WFtOi2o+eahOmhtemdouOAguWPpuWkluS4gOS4qua9nOWcqOeahOW6lOeUqOWwseaYr+S4uuWbvuWDj+aPkOS+m+mineWklueahOivtOaYjuS/oeaBr++8jOavlOWmguaXpeacn+aIluiAheWFtuS7lumdnuacrOi0qOeahOS/oeaBr+OAgjwvUD4NCjxQPnRpdGxl5bGe5oCn5YC85Y+v5Lul5q+UYWx05bGe5oCn5YC86K6+572u55qE5pu06ZW/44CC5LiN6L+H6KaB5rOo5oSP55qE5piv77yM5pyJ5Lqb5rWP6KeI5Zmo5Lya5oiq5pat6L+H6ZW/55qE5paH5a2X77yI5q+U5aaC5bel5YW35o+Q56S65oiW5YW25LuW77yJ44CC5q+U5aaCTW96aWxsYeaguOW/g+eahOa1j+iniOWZqOWPquiDveaYvuekuuacgOWFiOeahDYw5Liq5a2X56ym44CC6L+Z6KKr6K6k5Li65piv5LiA5LiqTW96aWxsYSBidWfvvIzov5nmmK/kvaDopoHms6jmhI/nmoTjgII8L1A+DQo8UD7kvb/nlKjliY3lhYjogIPomZE8L1A+DQo8UD7miJHnmoTlu7rorq7mmK/kv53or4Hmm7/mjaLmloflrZfvvIhhbHQgdGV4dO+8ieeyvuimgeOAguWcqOWkp+WkmuaVsOeahOW6lOeUqOmHjO+8jOmDveW6lOivpeiiq+eVmeeZve+8jGFsdD0=""（注意两引号中没有空格）。 想想那些图像，为那些浏览者提供了什么样的信息，你应该用什么文字去描述它，或者你该为看不到图像的人提供什么信息？ 将替换文字写成“照片：站在大楼外的CEO，穿着灰色西装和黑色领带，望着天”对于看不到图像的人真的有帮助？如果你觉得是，那么你就写吧。在很多情况下，我觉得让替换文字留白比较好。

对于title属性，比较难于给出严格的使用说明。我大部分用在那些不能自我释意的链接上，比如同一页面上的相同的链接文字，不同的链接页面。有时候也为一些按钮或者表单元素提供更多的说明文字。

更长的描述

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

longdesc属性可以用来提供链接到一个包含图片文字描述的单独页面。这就意味着把浏览者链接到另外的页面，这可能会造成理解上的困难。另外浏览器对于longdesc属性的支持也是不一致的，并且不是非常好。

longdesc属性可以包含一个链接到当前文档的其他部分（锚点）来取代链接到另外的页面。在Accessibility footnotes, Andy Clarke很好的解释说明了如何应用。

描述链接（D links）可以用来补充longdesc。一个描述链接就是一个常规的链接，连接到含有替换文字的页面。该链接被置于图像的旁边，并且在所有浏览器中都是可是的。对于它的有效性人们有很多不同意见，我的个人意见不大喜欢这个注意。WCAG也是，在他们的工作草案HTML Techniques for WCAG 2.0中，描述链接是被“不赞成”的。

如果对图片的长的描述对于任何浏览者都有用，那么你得考虑让它简单的显示在同一个文档里面，而不是链接到其他页面里或者藏起来。这样每个人都可以阅读到。这是一种简单低技术含量的方法。

更多信息

想了解更多关于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