DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> HTMLimg標簽的alt屬性和title屬性使用介紹
HTMLimg標簽的alt屬性和title屬性使用介紹
編輯:HTML和Xhtml     
當浏覽器賣主扭曲了標准並且自顧自的不按規則去做一些事,他們可能會造成一些問題,或者至少產生了混淆。例子之一就是一些浏覽器處理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屬性意在用來替換提交按鈕的圖片。比如:<input type="image" src="image.gif" alt="Submit" />.

使用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中,描述鏈接是被“不贊成”的。

如果對圖片的長的描述對於任何浏覽者都有用,那麼你得考慮讓它簡單的顯示在同一個文檔裡面,而不是鏈接到其他頁面裡或者藏起來。這樣每個人都可以閱讀到。這是一種簡單低技術含量的方法。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved