alt屬性
alt屬性是一個用於網頁語言HTML和XHTML、為輸出純文字的參數屬性。它的作用是當HTML元素本身的物件無法被渲染時,就顯示alt(替代)文字作為一種補救措施。這也常被螢幕閱讀軟體所使用, 使聽著網頁內容的人(例如視障者)可以與之互動。在HTML 4.01中,
alt屬性被規定在img
與area
兩個元素中必須被指定,即使是空的(否則螢幕閱讀軟體可能會讀出不必要的裝飾性元素名稱),alt屬性的語法如下:
<img alt="...">
<area alt="...">
例子
以下圖像的alt屬性是「一面紅色底、白色十字旗幟在空中飄揚,十字的直條較為靠向左邊的旗桿。」
這圖像的HTML句式可以如下:
<img alt="一面紅色底、白色十字旗幟在空中飄揚,十字的直條較為靠向左邊的旗桿。" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Dannebrog.jpg/180px-Dannebrog.jpg" width="180" height="135" />
視力受損的讀者如果使用螢幕閱讀器如JAWS或Orca,這些應用程序會將圖像中提供的alt文字讀出,讓他們以聆聽理解圖像內容。純文字網頁瀏覽器如Lynx或允許使用者手動會禁止下載圖像的瀏覽器會顯示alt文字以取代圖像;一般能正常顯示圖像的網頁瀏覽器的讀者則需要開啟圖像屬性或頁面原始檔才能得知alt屬性內容。
常見誤解
Internet Explorer 7及更舊版本會錯誤地將alt屬性渲染成提示框。[1][2]這個設定導致許多網絡開發者真的將alt(語法例子:alt="內容")屬性當成彈出式提示框來使用[3],而忽視了title
(代碼用法與alt相同。title="內容")才是用來顯示彈出式提示框的正確屬性。[4] 這個失誤在Internet Explorer 8及以後版本被改正過來,alt文字不會再被當成提示框彈出。[5]alt屬性有時亦會被誤稱為「alt元素」(alt tag,變相與img
元素畫上等號)。[2][6][7]
參見
資料來源
- ^ Why doesn’t Mozilla display my alt tooltips?. [2009-07-22].
- ^ 2.0 2.1 Anne van Kesteren. Alt attribute (alt tag, alt tooltip). 2004-12-16 [2009-07-22]. (原始內容存檔於2005-12-19).
- ^ Bug 25537 - Alt text is not displayed as a tooltip over <img> (頁面存檔備份,存於網際網路檔案館), Mozilla bugzilla
- ^ W3C HTML WG. 7.4.3 The title attribute. HTML 4.01規格說明. W3C. 1999-12-24 [2009-07-22]. (原始內容存檔於2009-07-26).
- ^ What's New in Internet Explorer 8 – Accessibility and ARIA. MSDN. Microsoft. [2009-07-22]. (原始內容存檔於2009-06-29).
- ^ Roger Johansson. It’s alt attribute, not alt tag. 456 Berea Street. 2005-11-07 [2009-07-22].
- ^ Tommy Olsson. Alt tags. The Autistic Cuckoo. 2004-07-20 [2009-07-22]. (原始內容存檔於2007-12-25).
外部連結
- How to specify alternate text(頁面存檔備份,存於網際網路檔案館),HTML 4.01規格說明
- Providing text equivalents for images(頁面存檔備份,存於網際網路檔案館),Dive Into Accessibility
- Guidelines on alt texts in
img
elements(頁面存檔備份,存於網際網路檔案館),Jukka Korpela編 - Alternative text for images: the alt attribute,Estelle Weyl編
- Mini-FAQ about the alternate text of images(頁面存檔備份,存於網際網路檔案館),Ian Hickson編