圖片資源的容錯及可訪問性處理
圖片資源的容錯及可訪問性處理
OK，最后一個章節(jié)，我們簡單聊一聊圖片資源的容錯及可訪問性處理。
圖片的可訪問性處理
可訪問性（A11Y），在我們的網(wǎng)站中，屬于非常重要的一環(huán)，但是大部分同學(xué)都容易忽視它。
在一些重交互、重邏輯的網(wǎng)站中，我們需要考慮用戶的使用習(xí)慣、使用場景，從高可訪問性的角度考慮，譬如假設(shè)用戶沒有鼠標(biāo)，僅僅使用鍵盤，能否順暢的使用我們的網(wǎng)站？
非常重要的一點(diǎn)是，提高可訪問性也能讓普通用戶更容易理解 Web 內(nèi)容。
基于?Usability & Web Accessibility - image
對于圖像信息，我們需要大致遵循如下可訪問性原則：
所有有意義的 img 元素必須有 alt 屬性
提供替代 alt 屬性的其他方式
使用輔助技術(shù)隱藏裝飾圖像
第一點(diǎn)非常好理解，所有的有意義的圖片元素都必須要提供?alt?屬性。
第二點(diǎn)比較有意思，在 A11Y 中，其實有一套?WAI-ARIA 標(biāo)準(zhǔn)。WAI-ARIA 是一個為殘疾人士等提供無障礙訪問動態(tài)、可交互Web內(nèi)容的技術(shù)規(guī)范。
簡單來說，它提供了一些屬性，增強(qiáng)標(biāo)簽的語義及行為：
可以使用 tabindex 屬性控制元素是否可以聚焦，以及它是否/在何處參與順序鍵盤導(dǎo)航
可以使用 role 屬性，來標(biāo)識元素的語義及作用，譬如使用?
<div id="saveChanges" tabindex="0" role="button">Save</div>來模擬一個按鈕還有大量的?
aria-*?屬性，表示元素的屬性或狀態(tài)，幫助我們進(jìn)一步地識別以及實現(xiàn)元素的語義化，優(yōu)化無障礙體驗
上述第二點(diǎn)，提供替代 alt 屬性的其他方式?的含義就是使用 WAR-ARIA 規(guī)范提供的諸如?aria-label?和?aria-labelledby?屬性為圖像提供可訪問的名稱。
當(dāng)存在這些屬性時，輔助技術(shù)（屏幕閱讀器）將忽略圖像的?alt?屬性并讀取 ARIA 標(biāo)簽。
而第三點(diǎn)，使用輔助技術(shù)隱藏裝飾圖像，又是什么意思呢？
上面第一點(diǎn)?所有有意義的 img 元素必須有 alt 屬性，反過來說，頁面上也會存在無意義的裝飾性的圖片，這些圖片內(nèi)容對輔助技術(shù)（屏幕閱讀器）而言，其實是可以忽略的。
對于沒有任何功能或信息內(nèi)容的裝飾圖像，可以通過多種方式對屏幕閱讀器隱藏：
使用空的?
alt?屬性使用 ARIA 屬性?
role="presentation"?標(biāo)明圖片元素是裝飾可忽略圖片使用 CSS background 的方式呈現(xiàn)這些圖片
alt 不要與 title 混淆
OK，下面來講一些有意思的細(xì)節(jié)內(nèi)容。
有一個非?；A(chǔ)的知識，簡單過一下，也就是圖片元素中，alt?與?title?的差異：
圖片中的?
alt?屬性是在圖片不能正常顯示時出現(xiàn)的文本提示。圖片中的?
title?屬性是在鼠標(biāo)在移動到元素上的文本提示。
正確使用 alt 屬性
對于使用屏幕閱讀器的用戶而言，圖片是無法正常展示或者被的瀏覽的，基于此，我們需要利用好?alt?屬性，或者是上述的aria-label?和?aria-labelledby?屬性。
那么，這些屬性內(nèi)的內(nèi)容應(yīng)該填充什么呢？我們需要基于圖片的功能加以區(qū)分：
信息性圖像：以圖形方式表示概念和信息的圖像，通常是圖片、照片和插圖。
alt?替代文本應(yīng)該至少是一個簡短的描述，傳達(dá)圖像所呈現(xiàn)的基本信息。裝飾性圖像：當(dāng)圖像的唯一目的是為頁面添加視覺裝飾，而不是傳達(dá)對理解頁面很重要的信息時，如上述所言，使用空的 alt，譬如?
alt=""功能圖像：用作鏈接或按鈕的圖像的替代文本應(yīng)該描述鏈接或按鈕的功能，而不是視覺圖像。此類圖像的示例是表示打印功能的打印機(jī)圖標(biāo)或提交表單的按鈕。
文本圖像：可讀文本有時會出現(xiàn)在圖像中。如果圖片不是徽標(biāo)，請避免圖片中出現(xiàn)文字。但是，如果使用文本圖像，替代文本應(yīng)包含與圖像中相同的詞。
圖形和圖表等復(fù)雜圖像：為了傳達(dá)數(shù)據(jù)或詳細(xì)信息，提供與圖像中提供的數(shù)據(jù)或信息等效的完整文本作為替代文本。
圖像組：如果多張圖像傳達(dá)一條信息，則一張圖像的替代文本應(yīng)傳達(dá)整組信息。
圖像映射：包含多個可點(diǎn)擊區(qū)域的圖像的替代文本應(yīng)該為鏈接集提供整體上下文。此外，每個可單獨(dú)點(diǎn)擊的區(qū)域都應(yīng)該有替代文本來描述鏈接的目的或目的地。
其實?alt?的學(xué)問是非常之多的，如果我們的頁面能做到這一點(diǎn)，那真的算是從根上開始思考，開始優(yōu)化用戶體驗。
img 元素與 background 元素的取舍
OK，那么，講到這里，還有一個有意思的點(diǎn)就很自然的應(yīng)該被提及。
那就是我們應(yīng)該什么時候使用?<img>?元素，什么時候使用?background?內(nèi)嵌圖片？
我們可以從性能及功能兩個方面進(jìn)行考慮：
類型imgbackgroud-image圖層位置前景背景默認(rèn)初始尺寸不定固定是否會產(chǎn)生回流重繪會不會圖片加載失敗可以觸發(fā)元素的 onerror 事件，展示 alt 屬性無法有效設(shè)置異常處理場景使用場景Logo、產(chǎn)品圖片、廣告圖片裝飾性無語義內(nèi)容等
其實性能上并不是核心考慮的點(diǎn)，因為上文我們也講到了在今天可以大規(guī)模使用是?loading="lazy"?屬性，圖片可以進(jìn)行原生支持的懶加載。
我們在考慮選取?<img>?還是?backgroud-image?的時候，更多的還是從圖片功能上進(jìn)行考慮。一般來說，作為修飾的且無語義的裝飾性圖片選擇使用?background-image，而比較重要的與網(wǎng)頁內(nèi)容相關(guān)的就使用?<img>?標(biāo)簽。
由于有語義的圖片使用?<img>?展示，它的一個好處在于，當(dāng)圖片加載失敗的時候，可以觸發(fā)元素的 onerror 事件，我們可以有效的利用這一點(diǎn)，對圖片進(jìn)行異常處理。
圖片的異常處理
當(dāng)圖片鏈接掛了，加載失敗了，我們比較好的處理方式應(yīng)該是怎么樣呢？
處理的方式有很多種。在張鑫旭老師的這篇文章中 --?圖片加載失敗后CSS樣式處理最佳實踐?有一個不錯的實踐。
核心思路為：
利用圖片加載失敗，觸發(fā)?
<img>?元素的?onerror?事件，給加載失敗的?<img>?元素新增一個樣式類利用新增的樣式類，配合?
<img>?元素的偽元素，在展示默認(rèn)兜底圖的同時，還能一起展示?<img>?元素的?alt?信息
<img src="test.png" alt="Alt Info" onerror="this.classList.add('error');">img.error { ? ?position: relative; ? ?display: inline-block;
}img.error::before { ? ?content: ""; ? ?/** 定位代碼 **/
? ?background: url(error-default.png);
}img.error::after { ? ?content: attr(alt); ? ?/** 定位代碼 **/}
我們利用偽元素?before?，加載默認(rèn)錯誤兜底圖，利用偽元素?after，展示圖片的?alt?信息：
OK，到此，完整的對圖片的處理就算完成了，這也比較好的闡述了為什么，對有語義，有?alt?信息的圖片，我們應(yīng)該使用?<img>?元素來實現(xiàn)。這是因為，我們可以在錯誤發(fā)生的時候，比較好的對圖片進(jìn)行兜底展示，讓用戶直觀的能夠看到 alt 內(nèi)容。
完整的 Demo 你可以戳這里看看：
CodePen Demo -- 圖片處理
當(dāng)然，上述方案存在兩個小問題：
對于每一個?
<img>?元素，我們都需要寫一段?onerror="this.classList.add('error');"?代碼，有點(diǎn)重復(fù)。因此，這個工作也可以交給 JavaScript 全局性的完成，并且，我們可能需要判斷?alt?的值是否為空，在為空時，使用默認(rèn)圖片 alt 兜底文案。早年間，
<img>?等替換元素是沒有偽元素的，后面 Chrome/Firefox 瀏覽器逐漸支持了當(dāng)，<img>?的 src 拉取失敗時，支持?<img>?元素的偽元素展示，這才有了上述的方案，但是，目前 Safari 仍不支持這個特性，所以，在 Safari 下，我們可能得到如下的結(jié)果：
效果仍然還是 OK 的，只是沒有了兜底圖的展示，在實際使用過程中，需要知道這一點(diǎn)。
總結(jié)一下
本章節(jié)，對圖片資源的容錯及可訪問性處理進(jìn)行了闡述。核心內(nèi)容在于：
對于圖像信息，我們需要大致遵循如下可訪問性原則：
所有有意義的 img 元素必須有 alt 屬性
提供替代 alt 屬性的其他方式
使用輔助技術(shù)隱藏裝飾圖像
正確使用 alt 屬性，了解不同場景下 alt 應(yīng)該填充什么內(nèi)容
img 元素與 background 元素的取舍
圖片異常處理的最佳實踐
至此，整個現(xiàn)代圖片性能優(yōu)化及體驗優(yōu)化指南到此就圓滿結(jié)束，整個系列的文章囊括了非常多的新的規(guī)范及特性，需要大家在實踐中根據(jù)實際情況靈活選取使用。
同時，我們也應(yīng)該能看到，前端技術(shù)僅僅在這一小個領(lǐng)域，都在不斷的迭代創(chuàng)新。雖然很難，還是需要不斷充實自己跟上新的潮流。共勉。
