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

2019-10-26 17:15:13

字體：大中小

來源：轉載

供稿：網友

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

HTML的title屬性本身有問題。之所以有問題是因為它在一些重要的方面表現的不夠好，盡管它陪伴我們超過14年了。隨著觸摸設備的興起，這個屬性的作用進一步降低。title屬性的可訪問性變得很雞肋，由于缺少瀏覽器的支持，屏幕閱讀器的支持和制作人員的重視。
下列情況下title屬性由于缺乏支持變得多余：

對于在手機瀏覽器里訪問web內容信息的人。通常title屬性的內容在桌面瀏覽器里顯示為提示信息。據我所知，沒有任何手機瀏覽器支持顯示提示信息，并且也沒有其他訪問title屬性內容的視覺方法。
對于那些無法使用鼠標的人提供信息。通常title屬性的內容在桌面瀏覽器里顯示為提示信息。雖然提示信息的行為已經有10多年歷史，但一直沒有瀏覽器實現使用鍵盤顯示title屬性的方法。
對于在大多數HTML元素上使用它為使用各種輔助技術的人提供信息。據我所知屏幕閱讀器對訪問title屬性信息一致不支持。

title屬性不友好用戶如下

手機用戶
僅使用鍵盤的用戶
使用屏幕放大器的用戶
屏幕閱讀器用戶
精細運動技能障礙的用戶
認知障礙的用戶

title屬性有用的例子：

為frame或iframe元素貼上標簽：
<frame title="navigation">
提供需要程序才能實現的在特殊情況下才顯示的標簽，直接使用可見的文本標簽會顯得多余：
<input type="text" title="search"> <input type="submit" value="search">
數據表格中的標簽控件。

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

為不能作為文本的鏈接或周圍內容添加額外信息：
<a href="newsletter.PDF" title="PDF file, size 1 mb.">newsletter</a>
相反這樣的信息應該作為鏈接文本的部分或在鏈接的旁邊。
提供和鏈接文本相同的信息：
<a href="newsletter.PDF" title="newsletter">newsletter</a>
建議不要復制鏈接內容作為title屬性。這其實相當于什么都沒做。
用于圖像的標題：
<img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
alt="The castle now has two towers and two walls.">
大概標題信息是最重要的信息，應該能被所有用戶默認訪問。如果是這樣，那么這個內容應該緊挨著圖片。
用來代替表單的標簽，去掉可見的文本標簽：
<input type="text" title="name">
屏幕閱讀器的用戶將會訪問表單元素的標簽，由于title屬性被列入可訪問性api內的屬性名稱（當文本標簽使用標簽元素時是不被支持的）。許多其他用戶并不如此。建議盡可能包括一個可見的文本標簽。

上一篇：html標準寫法與dreamweaver自動生成的不一樣

下一篇：使一個input文本框隨其中內容而變化長度的方法