到目前為止，大多數(shù)網(wǎng)頁設(shè)計行業(yè)都知道易訪問性的重要性。我們不停地談?wù)撍?，懇求我們的客戶認真對待它。它對網(wǎng)絡(luò)和用戶的影響是不可否認的。

但有時細節(jié)會在混亂中丟失，例如，我們經(jīng)常聽到"在圖像上使用替代文本！"這樣一個善意的好建議。不過，它也有點模糊。

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

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

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

意象的角色變化

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

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

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

替代文字的重要性

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

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

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

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

內(nèi)容豐富

裝飾性

功能性

文字圖片

復(fù)雜

圖片組

影像圖

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

并非總是必要的嗎？

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

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

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

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

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

關(guān)于幫助用戶

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

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

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

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