正確使用HTML title屬性的一些建議
來(lái)源:易賢網(wǎng) 閱讀:854 次 日期:2016-06-15 17:06:55
溫馨提示:易賢網(wǎng)小編為您整理了“正確使用HTML title屬性的一些建議”,方便廣大網(wǎng)友查閱!

如果你想對(duì)使用手機(jī),平板電腦和輔助技術(shù)的用戶隱藏某些內(nèi)容,而只對(duì)鍵盤(pán)用戶顯示,那么請(qǐng)使用title屬性。

細(xì)節(jié)

HTML的title屬性本身有問(wèn)題。之所以有問(wèn)題是因?yàn)樗谝恍┲匾姆矫姹憩F(xiàn)的不夠好,盡管它陪伴我們超過(guò)14年了。隨著觸摸設(shè)備的興起,這個(gè)屬性的作用進(jìn)一步降低。title屬性的可訪問(wèn)性變得很雞肋,由于缺少瀏覽器的支持,屏幕閱讀器的支持和制作人員的重視。

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

對(duì)于在手機(jī)瀏覽器里訪問(wèn)web內(nèi)容信息的人。通常title屬性的內(nèi)容在桌面瀏覽器里顯示為提示信息。據(jù)我所知,沒(méi)有任何手機(jī)瀏覽器支持顯示提示信息,并且也沒(méi)有其他訪問(wèn)title屬性內(nèi)容的視覺(jué)方法。

對(duì)于那些無(wú)法使用鼠標(biāo)的人提供信息。通常title屬性的內(nèi)容在桌面瀏覽器里顯示為提示信息。雖然提示信息的行為已經(jīng)有10多年歷史,但一直沒(méi)有瀏覽器實(shí)現(xiàn)使用鍵盤(pán)顯示title屬性的方法。

對(duì)于在大多數(shù)HTML元素上使用它為使用各種輔助技術(shù)的人提供信息。據(jù)我所知屏幕閱讀器對(duì)訪問(wèn)title屬性信息一致不支持。

title屬性不友好用戶如下

手機(jī)用戶

僅使用鍵盤(pán)的用戶

使用屏幕放大器的用戶

屏幕閱讀器用戶

精細(xì)運(yùn)動(dòng)技能障礙的用戶

認(rèn)知障礙的用戶

title屬性有用的例子:

為frame或iframe元素貼上標(biāo)簽:

<frame title="navigation">

提供需要程序才能實(shí)現(xiàn)的在特殊情況下才顯示的標(biāo)簽,直接使用可見(jiàn)的文本標(biāo)簽會(huì)顯得多余:

<input type="text" title="search"> <input type="submit" value="search">

數(shù)據(jù)表格中的標(biāo)簽控件。

title屬性無(wú)用或用處不大的例子:

為不能作為文本的鏈接或周?chē)鷥?nèi)容添加額外信息:

<a href="newsletter.PDF" title="PDF file, size 1 mb.">newsletter</a>

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

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

<a href="newsletter.PDF" title="newsletter">newsletter</a>

建議不要復(fù)制鏈接內(nèi)容作為title屬性。這其實(shí)相當(dāng)于什么都沒(méi)做。

用于圖像的標(biāo)題:

<img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."

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

大概標(biāo)題信息是最重要的信息,應(yīng)該能被所有用戶默認(rèn)訪問(wèn)。如果是這樣,那么這個(gè)內(nèi)容應(yīng)該緊挨著圖片。

用來(lái)代替表單的標(biāo)簽,去掉可見(jiàn)的文本標(biāo)簽:

<input type="text" title="name">

屏幕閱讀器的用戶將會(huì)訪問(wèn)表單元素的標(biāo)簽,由于title屬性被列入可訪問(wèn)性api內(nèi)的屬性名稱(當(dāng)文本標(biāo)簽使用標(biāo)簽元素時(shí)是不被支持的)。許多其他用戶并不如此。建議盡可能包括一個(gè)可見(jiàn)的文本標(biāo)簽。

為表單元素提供和可見(jiàn)的標(biāo)簽內(nèi)容相同的信息:

<label for="n1">name</label> <input type="text" title="name" id="n1">

重復(fù)可見(jiàn)的標(biāo)簽文本不可能除了添加一系列的用戶認(rèn)知噪聲。不做它。重復(fù)可見(jiàn)的標(biāo)簽文本除了添加一系列令人討厭的認(rèn)知噪聲外,似乎沒(méi)有其他作用,停止這種用法。

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

<label for="n1">name</label> <input type="text" title="Please use uppercase."id="n1">

如果這指令對(duì)于正確的使用表單元素非常重要,請(qǐng)?jiān)谠刂車(chē)峁┪淖中畔ⅲ_保每個(gè)用戶都能讀到。

作為縮寫(xiě)的擴(kuò)展:

<abbr title="world wide web consortium">W3C</abbr>

雖然abbr元素的title屬性被屏幕閱讀器軟件所支持,但使用它仍然是有問(wèn)題的,因?yàn)槠渌脩羧簾o(wú)法使用。建議當(dāng)縮寫(xiě)詞在文檔中首次出現(xiàn)時(shí)提供文本格式的全稱,或提供全稱形式的術(shù)語(yǔ)表。這并不是說(shuō)不可以使用title屬性,因其具有局限性,應(yīng)該提供文本形式的全稱。

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

依賴title屬性目前是不被鼓勵(lì)的,由于許多用戶代理不能按照規(guī)范的要求顯示這個(gè)屬性(如需要鼠標(biāo)指針設(shè)備引起提示信息的顯示,排除了僅使用鍵盤(pán)的用戶和觸摸屏用戶)

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

依托title屬性目前來(lái)看是被禁止的,由于許多用戶代理對(duì)這屬性的可訪問(wèn)性支持很弱……

更多信息請(qǐng)查看網(wǎng)頁(yè)制作
易賢網(wǎng)手機(jī)網(wǎng)站地址:正確使用HTML title屬性的一些建議
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢?yōu)闇?zhǔn)!
相關(guān)閱讀網(wǎng)頁(yè)制作

2025國(guó)考·省考課程試聽(tīng)報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào):hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)