title

HTMLimg標簽的alt屬性和title屬性使?介紹

當瀏覽器賣主扭曲了標準并且?顧?的不按規則去做?些事，他們可能會造成?些問題，或者?少產?了混淆。例?之?就是

?些瀏覽器處理alt屬性（?般會被錯誤的稱作alt標簽）的?式，?如擁有?量?戶的Windows的IE瀏覽器。

替換?字（alttext）并不是?來做提?（tooltip），或者更加確切的說，它并不是為圖?提供額外說明信息的。相反地，title

屬性才應該?來為元素提供額外說明信息。這些信息在?部分圖像瀏覽器?顯?為提?（tooltip），雖然制造商可以任意采取

其他?式渲染title屬性的?字。

很多?看來對這兩個屬性感到迷惑（最近這個問題在WebStandardsGroup郵件列表?變多了），所以我寫下我的想法，如

何去?它們。

alt屬性

為不能顯?圖像、窗體或applets的?戶代理（UA），alt屬性?來指定替換?字。替換?字的語?由lang屬性指定。來源：

Howtospecifyalternatetext.

Alt屬性（注意是“屬性”?不是“標簽”）包括替換說明，對于圖像和圖像熱點是必須的。它只能?在img、area和input元素中

（包括applet元素）。對于input元素，alt屬性意在?來替換提交按鈕的圖?。?如：

alt="Submit"/>.

使?alt屬性是為了給那些不能看到你?檔中圖像的瀏覽者提供?字說明。這包括那些使?本來就不?持圖像顯?或者圖像顯

?被關閉的瀏覽器的?戶，視覺障礙的?戶和使?屏幕閱讀器的?戶。替換?字是?來替代圖像?不是提供額外說明?字的。

在寫替換?字前仔細想想，保證那些?字確實為那些看不到圖像的?提供了說明信息，并且在上下?中有肉炒蘑菇 意義。對于那些裝飾

性的圖?年終獎稅率表 可以使?空的值（alt=""，引號中間沒有空格），?不是使?不相關的替換?字?如“bluebullet”或者“”。不

要忽略它，如果你忽略了，那么?些屏八寶飯怎么做 幕閱讀器會直接閱讀圖像?件的?件名，那些?字瀏覽器，?如Lynx會顯?圖像?件

的?件名，?那對于你的瀏覽者就沒什么?了。

包含?字的圖像圖?設置替換?字是最簡單的，圖像中包含的?字?般來說就可以作為alt屬性值。

?于替換?字的長度，看看WCAG2.0（?站內容可?性指南2.0）是怎么說的：

Alt屬性值得長度必須少于100個英?字符或者?戶必須保證替換?字盡可能的短。

我把它理解為“盡可能短，盡需要長”。

即使你想讓它顯?為提?（tooltip），也不要給?字元素使?alt屬性，這并不是它的?法。?今據我所知，那樣做僅能在

Windows的IE瀏覽器和古?的Netscape4.*（windows版本）有效。沒有?個Mac的瀏覽器會將它顯?為提?（tooltip）。

當瀏覽器把替換?字顯?為提?（tooltip）后，那些錯誤使?alt屬性的?為也受到了?勵。?些?開始寫促進睡眠的食物 ?意思的替換?字，

因為他們趨向于認為它是?個額外的說明信息，?不是不能顯?圖像的替換。其他?可能不想讓提?（tooltip）出現，然后就

完全忽略了寫alt屬性值。這些錯誤的做法，都給那些不能看到圖像的瀏覽者造成了困難。

額外的說明信息和?本質的信息請使?title屬性。

title屬性

title屬性為設置該屬性的元素提供建議性的信息。

來源:Thetitleattribute.

title屬性可以?在除了ba，bafont，head，html，meta，param，script和title之外的所有標簽。后羿射日的故事 但是并不是必須的。可能

這正是為什么很多?不明?何時使?它。

使?title屬性提供?本質的額外信息。?部分的可視化瀏覽器在?標懸浮在特定元素上時顯?title?字為提?信息（tool

tip），然?這?由制造商來決定如何渲染title?字。?些瀏覽器會將title?字顯?在狀態欄?。?如早期版本的Safari瀏覽器。

title屬性有?個很好的?途，即為鏈接添加描述性?字，特別是當連接本?并不是?做運動的英語 分清楚的表達了鏈接的?的。這樣就使得

訪問者知道那些鏈接將會帶他們到什么地?，他們就不會加載?個可能完全不感興趣的頁?。另外?個潛在的應?就是為圖像

提供額外的說明信息，?如?期或者其他?本質的信息。

title屬性值可以?alt屬性值設置的更長。不過要注意的是，有些瀏覽器會截斷過長的?字（?如?具提?或其他）。?如

Mozilla核?的瀏覽器只能顯?最先的60個字符。這被認為是?個Mozillabug，這是你要注意的。

使?前先考慮

我的建議是保證替換?字（alttext）精要。在?多數的應??，都應該被留?，alt=""（注意兩引號中沒有空格）。想想那些

圖像，為那些瀏覽者提供了什么樣的信息，你應該?什么?字去描述它，或者你該為看不到圖像的?提供什么信息？將替換

?字寫成“照?：站在?樓外的CEO，穿著灰?西裝和??領帶，望著天”對于看不到圖像的?真的有幫助？如果你覺得是，那

么你就寫吧。在很多情況下，我覺得讓替換?字留??較好。

對于title屬性，?較難于給出嚴格的使?說明。我?部分?在那些不能?我釋意的鏈接上，?如同?頁?上的相同的鏈接?

字，不同的鏈接頁?。有時候也為?些按鈕或者表單元素提供更多的說明?字。

更長的描述

當?個圖?需要更加長的描述，?超過alt屬性的限制，那么還有?些選擇。

longdesc屬性可以?來提供鏈接到?個包含圖??字描述的單獨頁?。這就意味著把瀏覽者鏈接到另外的頁?，這可能會造

成理解上的困難。另外瀏覽器對于longdesc屬性的?持也是不?致的，并且不是?常康婦軟膏 好。

longdesc屬作文的英語 性可以包含?個鏈接到當前?檔的其他部分（錨點）來取代鏈接到另外的頁?。在Accessibilityfootnotes,Andy

Clarke很好的解釋說明了如何應?。

描述鏈接（Dlinks）可以?來補充longdesc。?個描述鏈接就是?個常規的鏈接，連接到含有替換?字的頁?。該鏈接被置

于圖像的旁邊，并且在所有瀏覽器中都是可是的。對于它的有效性?們有很多不同意見，我的個?意見不?喜歡這個注意。

WCAG也是，在他們的?作草案HTMLTechniquesforWCAG2.0中，描述鏈接是被“不贊成”的。

如果對圖?的長的描述對于任何瀏覽者都有?，那么你得考慮讓它簡單的顯?在同?個?檔??，?不是鏈接到其他頁??或

者藏起來。這樣每個?都可以閱讀到。這是?種簡單低技術含量的?法。