alt屬性和title屬性

2021-08-30 20:55:27 字數 2505 閱讀 2583

alt屬性和title屬性

當瀏覽器賣主扭曲了標準並且自顧自的不按規則去做一些事,他們可能會造成一些問題,或者至少產生了混淆。例子之一就是一些瀏覽器處理alt屬性(一般會被錯誤的稱作alt標籤)的方式,比如擁有大量使用者的windows的ie瀏覽器。

替換文字(alt text)並不是用來做提示(tool tip),或者更加確切的說,它並不是為提供額外說明資訊的。相反地,title屬性才應該用來為元素提供額外說明資訊。這些資訊在大部分影象瀏覽器裡顯示為提示(tool tip),雖然製造商可以任意採取其他方式渲染title屬性的文字。

很多人看來對這兩個屬**到迷惑(最近這個問題在web standards group郵件列表裡變多了), 所以我寫下我的想法,如何去用它們。

alt屬性

使用alt屬性是為了給那些不能看到你文件中影象的瀏覽者提供文字說明。這包括那些使用本來就不支援影象顯示或者影象顯示被關閉的瀏覽器的使用者,視覺障礙的使用者和使用螢幕閱讀器的使用者。替換文字是用來替代影象而不是提供額外說明文字的。

在寫替換文字前仔細想想,保證那些文字確實為那些看不到影象的人提供了說明資訊,並且在上下文中有意義。對於那些裝飾性的可以使用空的值(alt="",引號中間沒有空格),而不是使用不相關的替換文字比如「blue bullet」或者「spacer.gif」。不要忽略它,如果你忽略了,那麼一些螢幕閱讀器會直接閱讀影象檔案的檔名,那些文字瀏覽器,比如lynx會顯示影象檔案的檔名,而那對於你的瀏覽者就沒什麼用了。

包含文字的影象設定替換文字是最簡單的,影象中包含的文字一般來說就可以作為alt屬性值。

alt屬性值得長度必須少於100個英文本元或者使用者必須保證替換文字盡可能的短。

我把它理解為「盡可能短,盡需要長」。

即使你想讓它顯示為提示(tool tip),也不要給文字元素使用alt屬性,這並不是它的用法。至今據我所知,那樣做僅能在windows的ie瀏覽器和古老的netscape 4.*(windows版本)有效。沒有乙個mac的瀏覽器會將它顯示為提示(tool tip)。

當瀏覽器把替換文字顯示為提示(tool tip)後,那些錯誤使用alt屬性的行為也受到了鼓勵。一些人開始寫無意思的替換文字,因為他們趨向於認為它是乙個額外的說明資訊,而不是不能顯示影象的替換。其他人可能不想讓提示(tool tip)出現,然後就完全忽略了寫alt屬性值。這些錯誤的做法,都給那些不能看到影象的瀏覽者造成了困難。

額外的說明資訊和非本質的資訊請使用title屬性。

title屬性

title屬性為設定該屬性的元素提供建議性的資訊。

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屬性

當瀏覽器賣主扭曲了標準並且自顧自的不按規則去做一些事,他們可能會造成一些問題,或者至少產生了混淆。例子之一就是一些瀏覽器處理alt屬性 一般會被錯誤的稱作alt標籤 的方式,比如擁有大量使用者的windows的ie瀏覽器。替換文字 alt text 並不是用來做提示 tool tip 或者更加確切的...

img標籤中alt屬性與title屬性

alt屬性 1 alt屬性是考慮到不支援影象顯示或者影象顯示被關閉的瀏覽器的使用者,以及視覺障礙的使用者和使用螢幕閱讀器的使用者。當不顯示的時候,的替換文字。2 alt屬性值得長度必須少於100個英文本元 3 alt屬性是img標籤的必須屬性,如果沒有特別意義的,可以寫alt 4 alt屬性是搜尋引...

img標籤中alt屬性與title屬性

1 alt屬性是考慮到不支援影象顯示或者影象顯示被關閉的瀏覽器的使用者,以及視覺障礙的使用者和使用螢幕閱讀器的使用者。當不顯示的時候,的替換文字。2 alt屬性值得長度必須少於100個英文本元 3 alt屬性是img標籤的必須屬性,如果沒有特別意義的,可以寫alt 4 alt屬性是搜尋引擎判斷與文字...