CSS中alt屬性和title屬性用法
你對(duì)CSS中的alt屬性和title屬性的使用是否熟悉，這里和大家分享一下兩者的使用，CSS中alt屬性只能用在img、area和input元素中（包括applet元素），對(duì)于input元素，alt屬性意在用來(lái)替換提交按鈕的圖片。而title屬性為設(shè)置該屬性的元素提供建議性的信息。
CSS中的alt屬性和title屬性
替換文字（alttext）并不是用來(lái)做提示（tooltip），或者更加確切的說(shuō)，它并不是為圖片提供額外說(shuō)明信息的。相反地，title屬性才應(yīng)該用來(lái)為元素提供額外說(shuō)明信息。這些信息在大部分圖像瀏覽器里顯示為提示（tooltip），雖然制造商可以任意采取其他方式渲染title屬性的文字。
很多人看來(lái)對(duì)這兩個(gè)屬性感到迷惑（最近這個(gè)問(wèn)題在WebStandardsGroup郵件列表里變多了），所以我寫(xiě)下我的想法，如何去用它們。
alt屬性
為不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來(lái)指定替換文字。替換文字的語(yǔ)言由lang屬性指定。
CSS中Alt屬性（注意是“屬性”而不是“標(biāo)簽”）包括替換說(shuō)明，對(duì)于圖像和圖像熱點(diǎn)是必須的。它只能用在img、area和input元素中（包括applet元素）。對(duì)于input元素，alt屬性意在用來(lái)替換提交按鈕的圖片。比如：<inputtype="image"src="image.gif"alt="Submit"/>.
使用alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說(shuō)明。這包括那些使用本來(lái)就不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶，視覺(jué)障礙的用戶和使用屏幕閱讀器的用戶。替換文字是用來(lái)替代圖像而不是提供額外說(shuō)明文字的。
在寫(xiě)替換文字前仔細(xì)想想，保證那些文字確實(shí)為那些看不到圖像的人提供了說(shuō)明信息，并且在上下文中有意義。對(duì)于那些裝飾性的圖片可以使用空的值（alt=""，引號(hào)中間沒(méi)有空格），而不是使用不相關(guān)的替換文字比如“bluebullet”或者“spacer.gif”。不要忽略它，如果你忽略了，那么一些屏幕閱讀器會(huì)直接閱讀圖像文件的文件名，那些文字瀏覽器，比如Lynx會(huì)顯示圖像文件的文件名，而那對(duì)于你的瀏覽者就沒(méi)什么用了。
包含文字的圖像圖片設(shè)置替換文字是最簡(jiǎn)單的，圖像中包含的文字一般來(lái)說(shuō)就可以作為alt屬性值。
即使你想讓它顯示為提示（tooltip），也不要給文字元素使用CSS中的alt屬性，這并不是它的用法。至今據(jù)我所知，那樣做僅能在Windows的IE瀏覽器和古老的Netscape4.*（windows版本）有效。沒(méi)有一個(gè)Mac的瀏覽器會(huì)將它顯示為提示（tooltip）。
當(dāng)瀏覽器把替換文字顯示為提示（tooltip）后，那些錯(cuò)誤使用alt屬性的行為也受到了鼓勵(lì)。一些人開(kāi)始寫(xiě)無(wú)意思的替換文字，因?yàn)樗麄冓呄蛴谡J(rèn)為它是一個(gè)額外的說(shuō)明信息，而不是不能顯示圖像的替換。其他人可能不想讓提示（tooltip）出現(xiàn)，然后就完全忽略了寫(xiě)alt屬性值。這些錯(cuò)誤的做法，都給那些不能看到圖像的瀏覽者造成了困難。
額外的說(shuō)明信息和非本質(zhì)的信息請(qǐng)使用title屬性。#p#
title屬性
title屬性為設(shè)置該屬性的元素提供建議性的信息。
CSS中title屬性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有標(biāo)簽。但是并不是必須的。可能這正是為什么很多人不明白何時(shí)使用它。
使用title屬性提供非本質(zhì)的額外信息。大部分的可視化瀏覽器在鼠標(biāo)懸浮在特定元素上時(shí)顯示title文字為提示信息（tooltip），然而這又由制造商來(lái)決定如何渲染title文字。一些瀏覽器會(huì)將title文字顯示在狀態(tài)欄里。比如早期版本的Safari瀏覽器。
CSS中title屬性有一個(gè)很好的用途，即為鏈接添加描述性文字，特別是當(dāng)連接本身并不是十分清楚的表達(dá)了鏈接的目的。這樣就使得訪問(wèn)者知道那些鏈接將會(huì)帶他們到什么地方，他們就不會(huì)加載一個(gè)可能完全不感興趣的頁(yè)面。另外一個(gè)潛在的應(yīng)用就是為圖像提供額外的說(shuō)明信息，比如日期或者其他非本質(zhì)的信息。
title屬性值可以比alt屬性值設(shè)置的更長(zhǎng)。不過(guò)要注意的是，有些瀏覽器會(huì)截?cái)噙^(guò)長(zhǎng)的文字（比如工具提示或其他）。比如Mozilla核心的瀏覽器只能顯示最先的60個(gè)字符。這被認(rèn)為是一個(gè)Mozillabug，這是你要注意的。
使用前先考慮
我的建議是保證替換文字（alttext）精要。在大多數(shù)的應(yīng)用里，都應(yīng)該被留白，alt=""（注意兩引號(hào)中沒(méi)有空格）。想想那些圖像，為那些瀏覽者提供了什么樣的信息，你應(yīng)該用什么文字去描述它，或者你該為看不到圖像的人提供什么信息？將替換文字寫(xiě)成“照片：站在大樓外的CEO，穿著灰色西裝和黑色領(lǐng)帶，望著天”對(duì)于看不到圖像的人真的有幫助？如果你覺(jué)得是，那么你就寫(xiě)吧。在很多情況下，我覺(jué)得讓替換文字留白比較好。
對(duì)于title屬性，比較難于給出嚴(yán)格的使用說(shuō)明。我大部分用在那些不能自我釋意的鏈接上，比如同一頁(yè)面上的相同的鏈接文字，不同的鏈接頁(yè)面。有時(shí)候也為一些按鈕或者表單元素提供更多的說(shuō)明文字。
更長(zhǎng)的描述
當(dāng)一個(gè)圖片需要更加長(zhǎng)的描述，而超過(guò)alt屬性的限制，那么還有一些選擇。
longdesc屬性可以用來(lái)提供鏈接到一個(gè)包含圖片文字描述的單獨(dú)頁(yè)面。這就意味著把瀏覽者鏈接到另外的頁(yè)面，這可能會(huì)造成理解上的困難。另外瀏覽器對(duì)于longdesc屬性的支持也是不一致的，并且不是非常好。
CSS中l(wèi)ongdesc屬性可以包含一個(gè)鏈接到當(dāng)前文檔的其他部分（錨點(diǎn)）來(lái)取代鏈接到另外的頁(yè)面。在Accessibilityfootnotes,AndyClarke很好的解釋說(shuō)明了如何應(yīng)用。
描述鏈接（Dlinks）可以用來(lái)補(bǔ)充longdesc。一個(gè)描述鏈接就是一個(gè)常規(guī)的鏈接，連接到含有替換文字的頁(yè)面。該鏈接被置于圖像的旁邊，并且在所有瀏覽器中都是可是的。對(duì)于它的有效性人們有很多不同意見(jiàn)，我的個(gè)人意見(jiàn)不大喜歡這個(gè)注意。WCAG也是，在他們的工作草案HTMLTechniquesforWCAG2.0中，描述鏈接是被“不贊成”的。
如果對(duì)圖片的長(zhǎng)的描述對(duì)于任何瀏覽者都有用，那么你得考慮讓它簡(jiǎn)單的顯示在同一個(gè)文檔里面，而不是鏈接到其他頁(yè)面里或者藏起來(lái)。這樣每個(gè)人都可以閱讀到。這是一種簡(jiǎn)單低技術(shù)含量的方法。
詳文參考：http://www.mypchelp.cn/it/200906/49363.shtml
【編輯推薦】
