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

2019-10-26 17:14:52

字体：大中小

来源：转载

供稿：网友

当浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事，他们可能会造成一些问题，或者至少产生了混淆。例子之一就是一些浏览器处理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="image.gif" alt="Submit" />.

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

在写替换文字前仔细想想，保证那些文字确实为那些看不到图像的人提供了说明信息，并且在上下文中有意义。对于那些装饰性的图片可以使用空的值（alt=""，引号中间没有空格），而不是使用不相关的替换文字比如“blue bullet”或者“spacer.gif”。不要忽略它，如果你忽略了，那么一些屏幕阅读器会直接阅读图像文件的文件名，那些文字浏览器，比如Lynx会显示图像文件的文件名，而那对于你的浏览者就没什么用了。

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

至于替换文字的长度，看看WCAG 2.0（网站内容可用性指南2.0）是怎么说的：

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

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

即使你想让它显示为提示（tool tip），也不要给文字元素使用alt属性，这并不是它的用法。至今据我所知，那样做仅能在Windows的IE浏览器和古老的Netscape 4.*（windows版本）有效。没有一个Mac的浏览器会将它显示为提示（tool tip）。

上一篇：关于使用Textarea的注意事项

下一篇：iframe节点初始化的问题探讨