alt屬性和title屬性_CSS/HTML

作者：JunChen 2005-5-23 12:00:35
原文：http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/
翻譯：JunChen

首發：http://blog.handsbrain.com/junchen/archive/2005/05/21/3355.aspx
著作權：本文著作權歸譯者Junchen所有，轉載請先聯絡譯者。
當瀏覽器賣主扭曲了標準並且自顧自的不按規則去做一些事，他們可能會造成一些問題，或者至少產生了混淆。例子之一就是一些瀏覽器處理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屬性意在用來替換提交按鈕的圖片。比如：.

使用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中，描述連結是被“不贊成”的。

如果對圖片的長的描述對於任何瀏覽者都有用，那麼你得考慮讓它簡單的顯示在同一個文檔裡面，而不是連結到其他頁面裡或者藏起來。這樣每個人都可以閱讀到。這是一種簡單低技術含量的方法。

更多資訊

想瞭解更多關於alt,title和longdesc屬性？看這裡：

Guidelines on alt texts in img elements
Writing good ALT text
Accessible alternatives
Accessibility footnotes
The image problem
Title Attribute – Your Take
Using link Titles to Help Users Predict Where They Are Going
How to specify alternate text
The title attribute

