HTMLimg標(biāo)簽的alt屬性和title屬性使用介紹

2019-10-26 17:14:52

字體：大中小

供稿：網(wǎng)友

當(dāng)瀏覽器賣主扭曲了標(biāo)準(zhǔn)并且自顧自的不按規(guī)則去做一些事，他們可能會(huì)造成一些問題，或者至少產(chǎn)生了混淆。例子之一就是一些瀏覽器處理alt屬性（一般會(huì)被錯(cuò)誤的稱作alt標(biāo)簽）的方式，比如擁有大量用戶的Windows的IE瀏覽器。

替換文字（alt text）并不是用來做提示（tool tip），或者更加確切的說，它并不是為圖片提供額外說明信息的。相反地，title屬性才應(yīng)該用來為元素提供額外說明信息。這些信息在大部分圖像瀏覽器里顯示為提示（tool tip），雖然制造商可以任意采取其他方式渲染title屬性的文字。

很多人看來對(duì)這兩個(gè)屬性感到迷惑（最近這個(gè)問題在Web Standards Group郵件列表里變多了），所以我寫下我的想法，如何去用它們。

alt屬性

為不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。來源：How to specify alternate text.

Alt屬性（注意是“屬性”而不是“標(biāo)簽”）包括替換說明，對(duì)于圖像和圖像熱點(diǎn)是必須的。它只能用在img、area和input元素中（包括applet元素）。對(duì)于input元素，alt屬性意在用來替換提交按鈕的圖片。比如：<input type="image" src="image.gif" alt="Submit" />.

使用alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明。這包括那些使用本來就不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶。替換文字是用來替代圖像而不是提供額外說明文字的。

在寫替換文字前仔細(xì)想想，保證那些文字確實(shí)為那些看不到圖像的人提供了說明信息，并且在上下文中有意義。對(duì)于那些裝飾性的圖片可以使用空的值（alt=""，引號(hào)中間沒有空格），而不是使用不相關(guān)的替換文字比如“blue bullet”或者“spacer.gif”。不要忽略它，如果你忽略了，那么一些屏幕閱讀器會(huì)直接閱讀圖像文件的文件名，那些文字瀏覽器，比如Lynx會(huì)顯示圖像文件的文件名，而那對(duì)于你的瀏覽者就沒什么用了。

包含文字的圖像圖片設(shè)置替換文字是最簡(jiǎn)單的，圖像中包含的文字一般來說就可以作為alt屬性值。

至于替換文字的長(zhǎng)度，看看WCAG 2.0（網(wǎng)站內(nèi)容可用性指南2.0）是怎么說的：

Alt屬性值得長(zhǎng)度必須少于100個(gè)英文字符或者用戶必須保證替換文字盡可能的短。

我把它理解為“盡可能短，盡需要長(zhǎng)”。

即使你想讓它顯示為提示（tool tip），也不要給文字元素使用alt屬性，這并不是它的用法。至今據(jù)我所知，那樣做僅能在Windows的IE瀏覽器和古老的Netscape 4.*（windows版本）有效。沒有一個(gè)Mac的瀏覽器會(huì)將它顯示為提示（tool tip）。

上一篇：關(guān)于使用Textarea的注意事項(xiàng)

下一篇：iframe節(jié)點(diǎn)初始化的問題探討