當前位置:才華齋>設計>網頁設計>

正確使用HTML中title屬性的一些建議

網頁設計 閲讀(2.14W)

如果你想對使用手機,平板電腦和輔助技術的用户隱藏某些內容,而只對鍵盤用户顯示,那麼請使用title屬性。

正確使用HTML中title屬性的一些建議

  細節

HTML的title屬性本身有問題。之所以有問題是因為它在一些重要的方面表現的不夠好,儘管它陪伴我們超過14年了。隨着觸摸設備的興起,這個屬性的作用進一步降低。title屬性的可訪問性變得很雞肋,由於缺少瀏覽器的支持,屏幕閲讀器的支持和製作人員的重視。

下列情況下title屬性由於缺乏支持變得多餘:

對於在手機瀏覽器裏訪問web內容信息的人。通常title屬性的內容在桌面瀏覽器裏顯示為提示信息。據我所知,沒有任何手機瀏覽器支持顯示提示信息,並且也沒有其他訪問title屬性內容的視覺方法。

對於那些無法使用鼠標的人提供信息。通常title屬性的內容在桌面瀏覽器裏顯示為提示信息。雖然提示信息的行為已經有10多年歷史,但一直沒有瀏覽器實現使用鍵盤顯示title屬性的方法。

對於在大多數HTML元素上使用它為使用各種輔助技術的人提供信息。據我所知屏幕閲讀器對訪問title屬性信息一致不支持。

  title屬性不友好用户如下

手機用户

僅使用鍵盤的用户

使用屏幕放大器的用户

屏幕閲讀器用户

精細運動技能障礙的用户

認知障礙的用户

title屬性有用的例子:

為frame或iframe元素貼上標籤:

提供需要程序才能實現的在特殊情況下才顯示的標籤,直接使用可見的文本標籤會顯得多餘:

數據表格中的標籤控件。

title屬性無用或用處不大的例子:

為不能作為文本的鏈接或周圍內容添加額外信息:

相反這樣的信息應該作為鏈接文本的部分或在鏈接的旁邊。

提供和鏈接文本相同的信息:

建議不要複製鏈接內容作為title屬性。這其實相當於什麼都沒做。

用於圖像的標題:

alt="The castle now has two towers and two walls.">

大概標題信息是最重要的信息,應該能被所有用户默認訪問。如果是這樣,那麼這個內容應該緊挨着圖片。

用來代替表單的標籤,去掉可見的文本標籤:

屏幕閲讀器的用户將會訪問表單元素的標籤,由於title屬性被列入可訪問性api內的屬性名稱(當文本標籤使用標籤元素時是不被支持的)。許多其他用户並不如此。建議儘可能包括一個可見的文本標籤。

為表單元素提供和可見的標籤內容相同的信息:

重複可見的標籤文本不可能除了添加一系列的用户認知噪聲。不做它。重複可見的標籤文本除了添加一系列令人討厭的'認知噪聲外,似乎沒有其他作用,停止這種用法。

為表單元素提供額外的指令:

如果這指令對於正確的使用表單元素非常重要,請在元素周圍提供文字信息,確保每個用户都能讀到。

作為縮寫的擴展:

  W3C

雖然abbr元素的title屬性被屏幕閲讀器軟件所支持,但使用它仍然是有問題的,因為其他用户羣無法使用。建議當縮寫詞在文檔中首次出現時提供文本格式的全稱,或提供全稱形式的術語表。這並不是説不可以使用title屬性,因其具有侷限性,應該提供文本形式的全稱。

HTML 5.1 包括使用title屬性的一般性建議:

依賴title屬性目前是不被鼓勵的,由於許多用户代理不能按照規範的要求顯示這個屬性(如需要鼠標指針設備引起提示信息的顯示,排除了僅使用鍵盤的用户和觸摸屏用户)

用title屬性代替img元素的alt屬性或作為圖片的標題是被禁止的

依託title屬性目前來看是被禁止的,由於許多用户代理對這屬性的可訪問性支持很弱……