到目前為止，大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)行業(yè)都知道易訪(fǎng)問(wèn)性的重要性。我們不停地談?wù)撍瑧┣笪覀兊目蛻?hù)認(rèn)真對(duì)待它。它對(duì)網(wǎng)絡(luò)和用戶(hù)的影響是不可否認(rèn)的。

但有時(shí)細(xì)節(jié)會(huì)在混亂中丟失，例如，我們經(jīng)常聽(tīng)到“在圖像上使用替代文本！”這樣一個(gè)善意的好建議。不過(guò)，它也有點(diǎn)模糊。

雖然知道alt屬性在可訪(fǎng)問(wèn)性方面是有益的，但是我們真正需要的是上下文。正確的使用方法是什么？有些時(shí)候我們不應(yīng)該使用它們？

這些問(wèn)題的靈感來(lái)自于我與一些設(shè)計(jì)師和開(kāi)發(fā)人員在Twitter上的對(duì)話(huà)，它讓我意識(shí)到，我并不是唯一一個(gè)有時(shí)會(huì)為如何建立對(duì)用戶(hù)有利的網(wǎng)站而苦苦掙扎的人。

今天，我們將嘗試闡明這個(gè)重要屬性的正確用法！

意象的角色變化

這些年來(lái)，網(wǎng)頁(yè)設(shè)計(jì)師利用圖片的方式已經(jīng)發(fā)生了很大的變化。在網(wǎng)絡(luò)的早期，圖像的使用方式是我們現(xiàn)在可能想不到的。我們將它們作為頁(yè)面標(biāo)題、導(dǎo)航系統(tǒng)甚至整個(gè)充滿(mǎn)內(nèi)容的頁(yè)面來(lái)使用。

對(duì)于依賴(lài)屏幕閱讀器或其他輔助技術(shù)的用戶(hù)，這可能會(huì)導(dǎo)致頁(yè)面無(wú)法使用。在大量?jī)?nèi)容顯示為圖像的情況下，即使簡(jiǎn)單的alt屬性也沒(méi)有多大幫助。

值得慶幸的是，我們已經(jīng)吸取了一些重要的教訓(xùn)。網(wǎng)絡(luò)排版的爆炸式發(fā)展已經(jīng)消除了過(guò)去任何與設(shè)計(jì)相關(guān)的誤用圖片的理由。隨著可訪(fǎng)問(wèn)性的出現(xiàn)，許多人現(xiàn)在意識(shí)到圖像有特定的作用。

替代文字的重要性

合理地使用圖像應(yīng)該會(huì)帶來(lái)更好的可訪(fǎng)問(wèn)性，雖然這在一定程度上是正確的，但我們?nèi)匀挥心芰Π咽虑楦阍?。這就是替代文本可以發(fā)揮作用的地方——如果使用正確的話(huà)。

記住只使用alt屬性并不一定會(huì)給用戶(hù)帶來(lái)很多好處，例如，假設(shè)我們有一個(gè)標(biāo)題標(biāo)簽，上面寫(xiě)著“關(guān)于我們”。下面是公司員工的合影。如果我們簡(jiǎn)單地將alt屬性設(shè)置為alt= " About Us "，那么當(dāng)輔助技術(shù)讀取它時(shí)，它就變得多余了。因此，它并不真正告訴用戶(hù)圖像是什么或它意味著什么。

那么，我們應(yīng)該用什么來(lái)代替呢？這在很大程度上取決于頁(yè)面本身的內(nèi)容和圖像在其中的作用。然而，這又帶來(lái)了另一個(gè)潛在的問(wèn)題。

值得慶幸的是，W3C有一個(gè)有用的指南，將圖像分解為不同的概念：

內(nèi)容豐富

裝飾性

功能性

文字圖片

復(fù)雜

圖片組

影像圖

該指南提供了每個(gè)概念的簡(jiǎn)要說(shuō)明，以及可以幫助您確定提供替代文本的最相關(guān)路徑的示例。如果您仍然不確定，請(qǐng)查看alt決策樹(shù)以獲得更多指導(dǎo)。

并非總是必要的嗎？

W3C指南中最有趣的信息之一是，并非所有圖像都需要alt屬性。

但是，等一下。那些每次都要使用alt的調(diào)用呢？我們不是忽略了可訪(fǎng)問(wèn)性嗎？

結(jié)果是，對(duì)于裝飾性圖像（不向頁(yè)面添加任何信息），alt屬性就變得沒(méi)有必要了。在這種情況下，提供替代文本會(huì)“給屏幕閱讀器輸出增加雜音”。因此，就像缺少空白會(huì)導(dǎo)致視覺(jué)頁(yè)面布局混亂一樣，對(duì)于依賴(lài)這些工具的人來(lái)說(shuō)，這些額外的文本也會(huì)造成同樣的結(jié)果。

讓web設(shè)計(jì)人員感到困難的是自動(dòng)化的可訪(fǎng)問(wèn)性工具，比如WAVE標(biāo)記圖像，當(dāng)他們閱讀一個(gè)頁(yè)面時(shí)，沒(méi)有替代文本。甚至谷歌也會(huì)向你發(fā)送煩人的電子郵件，抱怨某個(gè)特定的圖像在他們的視圖中無(wú)法訪(fǎng)問(wèn)。這迫使我們填寫(xiě)屬性，只是為了通過(guò)自動(dòng)化測(cè)試。

因此，我們有責(zé)任對(duì)這些結(jié)果持保留態(tài)度，并在必要時(shí)向客戶(hù)解釋情況。在特定情況下，空的alt屬性可能是有益的。

關(guān)于幫助用戶(hù)

在做了一些關(guān)于如何使用alt屬性的研究之后，我意識(shí)到我經(jīng)常使用錯(cuò)誤的方法。我懷疑很多設(shè)計(jì)師也這么做過(guò)。

在某種程度上，這是可以理解的。這個(gè)屬性雖然已經(jīng)存在了很長(zhǎng)時(shí)間，但并不令人興奮。它是功利主義的，并不總是在我們的腦海中。

然而，對(duì)于許多用戶(hù)來(lái)說(shuō)，這是至關(guān)重要的?？紤]到不是每個(gè)人都能輕易看到我們整合到頁(yè)面中的圖像。對(duì)于這些人來(lái)說(shuō)，alt屬性的作用是幫助將上下文帶到他們正在消費(fèi)的內(nèi)容中。

當(dāng)我們構(gòu)建一個(gè)日益復(fù)雜的網(wǎng)絡(luò)時(shí)，這是需要記住的。