HTMLimg标识的alt特性和title特性应用详细介绍

当访问器卖主歪曲了规范而且自顾自的不按标准去做1些事,她们将会会导致1些难题,或最少造成了搞混。事例之1便是1些访问器解决alt特性(1般会被不正确的称作alt标识)的方法,例如有着很多客户的Windows的IE访问器。

更换文本(alt text)其实不是用来做提醒(tool tip),或更为准确的说,它其实不是为照片出示附加表明信息内容的。相反地,title特性才应当用来为元素出示附加表明信息内容。这些信息内容在绝大多数图象访问器里显示信息为提醒(tool tip),尽管生产制造商能够随意采用别的方法3D渲染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”。不必忽视它,假如你忽视了,那末1些显示屏阅读文章器会立即阅读文章图象文档的文档名,那些文本访问器,例如Lynx会显示信息图象文档的文档名,而那针对你的访问者就没甚么用了。

包括文本的图象照片设定更换文本是最简易的,图象中包括的文本1般来讲便可以做为alt特性值。

至于更换文本的长度,看看WCAG 2.0(网站內容能用性指南2.0)是如何说的:

Alt特性值得长度务必少于100个英文本符或客户务必确保更换文本尽量的短。

我把它了解为“尽量短,尽必须长”。

即便你想让它显示信息为提醒(tool tip),也不必给文本元素应用alt特性,这其实不是它的用法。至今据我所知,那样做仅能在Windows的IE访问器和古老的Netscape 4.*(windows版本号)合理。沒有1个Mac的访问器会将它显示信息为提醒(tool tip)。

当访问器把更换文本显示信息为提醒(tool tip)后,那些不正确应用alt特性的个人行为也遭受了激励。1些人刚开始写不经意思的更换文本,由于她们趋于于觉得它是1个附加的表明信息内容,而并不是不可以显示信息图象的更换。别的人将会不想让提醒(tool tip)出現,随后就彻底忽视了写alt特性值。这些不正确的做法,都给那些不可以看到图象的访问者导致了艰难。

附加的表明信息内容和非实质的信息内容请应用title特性。

title特性

title特性为设定该特性的元素出示提议性的信息内容。
来源于: The title attribute.

title特性能够用在除base,basefont,head,html,meta,param,script和title以外的全部标识。可是其实不是务必的。将会这更是为何许多人不搞清楚什么时候应用它。

应用title特性出示非实质的附加信息内容。绝大多数的可视性化访问器在电脑鼠标飘浮在特殊元素上时显示信息title文本为提醒信息内容(tool tip),但是这又由生产制造商来决策怎样3D渲染title文本。1些访问器会将title文本显示信息在情况栏里。例如初期版本号的Safari访问器。

title特性有1个很好的主要用途,即为连接加上叙述性文本,非常是当联接自身其实不是10分清晰的表述了连接的目地。这样就使得浏览者了解那些连接可能带她们到甚么地区,她们就不容易载入1个将会彻底不感兴趣爱好的网页页面。此外1个潜伏的运用便是为图象出示附加的表明信息内容,例如时间或别的非实质的信息内容。

title特性值能够比alt特性值设定的更长。但是要留意的是,一些访问器会断开太长的文本(例如专用工具提醒或别的)。例如Mozilla关键的访问器只能显示信息最开始的60个标识符。这被觉得是1个Mozilla bug,这是你要留意的。

应用前先考虑到

我的提议是确保更换文本(alt text)精要。在大多数数的运用里,都应当被留白,alt=""(留意两引号中沒有空格)。 想一想那些图象,为那些访问者出示了甚么样的信息内容,你应当用甚么文本去叙述它,或你该为看不见图象的人出示甚么信息内容? 将更换文本写成“相片:站在大楼外的CEO,衣着灰色西装和黑色领带,望着天”针对看不见图象的人真的有协助?假如你感觉是,那末你就写吧。在许多状况下,我感觉让更换文本留白较为好。

针对title特性,较为难于得出严苛的应用表明。我绝大多数用在那些不可以自身释意的连接上,例如同1网页页面上的同样的连接文本,不一样的连接网页页面。有时也为1些按钮或表模块素出示更多的表明文本。

更长的叙述

当1个照片必须更为长的叙述,而超出alt特性的限定,那末也有1些挑选。

longdesc特性能够用来出示连接到1个包括照片文本叙述的独立网页页面。这就代表着把访问者连接到此外的网页页面,这将会会导致了解上的艰难。此外访问器针对longdesc特性的适用也是不1致的,而且并不是十分好。

longdesc特性能够包括1个连接到当今文本文档的别的一部分(锚点)来替代连接到此外的网页页面。在Accessibility footnotes, Andy Clarke很好的解释表明了怎样运用。

叙述连接(D links)能够用来填补longdesc。1个叙述连接便是1个基本的连接,联接到含有更换文本的网页页面。该连接被置于图象的周围,而且在全部访问器中全是但是的。针对它的合理性人们有许多不一样建议,我的本人建议不大喜爱这个留意。WCAG也是,在她们的工作中草案HTML Techniques for WCAG 2.0中,叙述连接是被“不赞同”的。

假如对照片的长的叙述针对任何访问者都有效,那末你得考虑到让它简易的显示信息在同1个文本文档里边,而并不是连接到别的网页页面里或藏起来。这样每一个人都可以以阅读文章到。这是1种简易低技术性含量的方式。