`

Alt & Title 使用技巧

阅读更多

  当浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事,他们可能会造成一些问题,或者至少产生了混淆。例子之一就是一些浏览器处理alt属性(一般会被错误的称作alt标签)的方式,比如拥有大量用户的Windows的IE浏览器。替换文字(alt text)并不是用来做提示(tool tip),或者更加确切的说,它并不是为图片提供额外说明信息的。相反地,title属性才应该用来为元素提供额外说明信息。这些信息在大部分图像浏览器里显示为提示(tool tip),虽然制造商可以任意采取其他方式渲染title属性的文字。

 

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)。

  当浏览器把替换文字显示为提示(tool tip)后,那些错误使用alt属性的行为也受到了鼓励。一些人开始写无意思的替换文字,因为他们趋向于认为它是一个额外的说明信息,而不是不能显示图像的替换。其他人可能不想让提示(tool tip)出现,然后就完全忽略了写alt属性值。这些错误的做法,都给那些不能看到图像的浏览者造成了困难。

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

 

title属性

  title属性为设置该属性的元素提供建议性的信息。
  来源: The title attribute.

  title属性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。但是并不是必须的。可能这正是为什么很多人不明白何时使用它。

  使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息(tool tip),然而这又由制造商来决定如何渲染title文字。一些浏览器会将title文字显示在状态栏里。比如早期版本的Safari浏览器。

  title属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方,他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息,比如日期或者其他非本质的信息。

  title属性值可以比alt属性值设置的更长。不过要注意的是,有些浏览器会截断过长的文字(比如工具提示或其他)。比如Mozilla核心的浏览器只能显示最先的60个字符。这被认为是一个Mozilla bug,这是你要注意的。

  

使用前先考虑

  建议是保证替换文字(alt text)精要。在大多数的应用里,都应该被留白,alt=""(注意两引号中没有空格)。 想想那些图像,为那些浏览者提供了什么样的信息,你应该用什么文字去描述它,或者你该为看不到图像的人提供什么信息? 将替换文字写成“照片:站在大楼外的CEO,穿着灰色西装和黑色领带,望着天”对于看不到图像的人真的有帮助?如果你觉得是,那么你就写吧。在很多情况下,我觉得让替换文字留白比较好。

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

  

更长的描述

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

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

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

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

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

 

分享到:
评论

相关推荐

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    使用HTML开发商业网站-图像标签课件.pptx

    本节将为大家介绍几种常用的图像格式以及在网页中插入图像的技巧。 图像标签 GIF最突出的地方就是它支持动画,同时GIF也是一种无损的图像格式,也就是说修改图片之后,图片质量几乎没有损失。再加上GIF支持透明(全...

    55种网页小技巧 ---- 下载无需扣分,具有一定收藏价值

    javascript主页弹出窗口技巧.html div span layer的区别.html email地址的分割.html ENTER键可以让光标移到下一个输入框.html IE地址栏前换成自己的图标 .html TEXTAREA自适应文字行数的多少.html title显示...

    JSP+Struts+JSTL+EL新闻发布系统jsp

    3、制作简单,由于本人以前曾经使用过动易网站管理系统,所以在功能方面向动易文章管理系统靠拢, 前台制作采用标签制,分为系统标签和用户自义义标签两种,系统标签是自代的,用户不可以修改,而自定义标签则是用户...

    前端vue面试题大全汇总

    5、img 的alt 与title 有何异同? strong 与em 的异同? 6、你能描述一下渐进增强和优雅降级之间的不同吗? 7、为什么利用多个域名来存储网站资源会更有效? 8、请谈一下你对网页标准和标准制定机构重要性的理解。 9...

    艺帆学历教育培训单位机构网站源码精美模板

    其他说明:首页幻灯才用JS而非Flash ,搜索引擎蜘蛛更能识别并爬到相关链接,默认模板全站DIV加CSS代码干净简洁,所有链接图片均有alt注释和title标注 全站完整无错,如无法架设可以去论坛看下教程 后台地址:i5808...

    入门学习Linux常用必会60个命令实例详解doc/txt

    一个新安装的Linux系统允许用户使用“Alt+F1”到“Alt+F6”键来访问前六个虚拟控制台。虚拟控制台最有用的是,当一个程序出错造成系统死锁时,可以切换到其它虚拟控制台工作,关闭这个程序。 shutdown 1.作用 ...

    JQuery1.3笔记.txt

    一個隨身的技巧手冊,txt版本的,所以,廣大友人可以在公車上,電梯間,抑或者睡前三分鐘,鞏固和複習, 減少浪費生命的行為 Attribute: $(“p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(“img”)....

    XTranslate-crx插件

    通过将鼠标指针放在图像元素上并按热键,您甚至可以从图像中获取一些信息(如果适用,将使用title或alt属性)。该技巧实际上适用于鼠标光标下的任何元素。只需将鼠标放在项目上,然后按热键即可! PDF文件中的翻译也...

    HGE_系列教材(1-9)

    这里有一个技巧: 如果我们需要在程序中显示一个气球,这个气球的颜色不断变化,这时候我们并不需要准备 多张不同颜色的气球纹理,而只需要一张白色的气球纹理,设置blend 为BLEND_COL ORMUL,白色的R,G,B 值被表示...

    protel2004封装

    小结:PCB使用技巧 1、元器件标号自动产生或已有的元器件标号取消重来 Tools工具|Annotate…注释 All Part:为所有元器件产生标号 Reset Designators:撤除所有元器件标号 2、单面板设置: Design设计|...

    网管教程 从入门到精通软件篇.txt

    只有在使用故障恢复控制台时,才能使用 fixboot 命令。  fixboot [drive]  参数 驱动器  将要写入引导扇区的驱动器。它将替代默认的驱动器(即用户登录的系统分区)。例如,驱动器:D:  范例  下列命令...

    SEO魔法书-最全的优化教程

    关于这本书..............................................................................................................................................1 第一章 搜索引擎基础.............................

    搜索引擎优化魔法书

    目录 关于这本书.............................................................................................................................................1 第一章 搜索引擎基础..........................

Global site tag (gtag.js) - Google Analytics