「Web 的力量來自於它的普適性。關鍵在於所有人，包括殘障人士，都能使用 Web。」——W3C 主任兼全球資訊網發明者 Tim Berners-Lee
在過去的兩年中，WebAIM 對前 1,000,000 個網站的主頁進行了可訪問性評估。他們的結果表明，即使在主流網站上，可訪問性錯誤仍然非常常見。
「在一百萬個主頁中，我們檢測到了 60,909,278 個可訪問性錯誤——平均每頁 60.9 個錯誤。」「每 14 個殘障用戶會交互的主頁元素中，就有 1 個能檢測出錯誤。」總計 98.1％的主頁檢測出了 WCAG 2 故障——比去年的 97.8％有所增加。
在分析報告中，WebAIM 分享了六個最常見的 WCAG 故障。
在這篇文章中，我將具體介紹這六種故障，告訴大家為什麼我們要重視它們，以及如何解決這些問題。讀者可以通過演示應用查看每種故障的實時演示。
低對比度文字
「平均而言，每個網站主頁上有 36 種低對比度文本實例。」——WebAIM Million
網站的所有文本和文本後面的背景顏色之間都應有較高的顏色對比度。換句話說，文字的亮度不應太接近背景亮度。
低對比度的文本會讓讀者更難區分字符的形狀和邊緣，結果影響閱讀速度和理解力。文本尺寸越小，這個問題也就會越嚴重，所以隨著移動用戶的數量不斷增長，這個問題也愈加突出。
對於視力受損的用戶來說，低對比度文字讀起來也會更困難。有十二分之一的人類是色盲。許多老年人的對比度敏感度會因身體老化而下降。視力受損的用戶在文字和背景沒有足夠對比度的情況下將無法閱讀。
如何修復
之所以低對比度文字的問題如此常見，一個原因是這個問題很難被發現。在編寫或查看某些代碼時，你可能會看到文本的色彩十六進位值為#f2f2f2，而背景的值為#808dd1。它們之間的對比度夠高嗎？那就難說了。就算開發人員檢查實際的顯示效果，也很難確定對比度是否足以滿足弱視或使用較小屏幕的用戶的需要。
還好，有幾種工具可以自動測量顏色對比度，並高亮顯示那些不符合成功標準的內容。
Lighthouse 是谷歌創建的工具，如果你使用的是谷歌 Chrome 瀏覽器，它已經內置在瀏覽器中了（它也有針對其他瀏覽器的擴展）。用它運行審核程序將生成一份報告，標記出網站上的可訪問性問題。它將列出檢測到的所有文本背景和前景色沒有足夠高對比度的元素。
知道哪些元素不符合成功條件之後，你就可以調整背景和前景色，以增加對比度。
還有多種顏色對比度分析器可以幫助你找到具有足夠對比度的兩種顏色。如果你使用的是谷歌Chrome 瀏覽器，則可以使用Chrome DevTools 的顏色選擇器，其會顯示兩條白線，分別是AA 和AAA 閾值。
WCAG 將文本對比度的成功標準定義為 4.5：1 的對比度。對於上面的「Hello World」示例，我們可以看到顏色對比度僅為 2.82，未達到閾值。增加對比度後，我們就可以提高元素的可讀性和可訪問性。
缺少圖片的替代文本
「所有主頁圖像中有 31.3％（平均每頁 12 張）缺少替代文本……「這些數據表明，Web 上有近半圖像缺少替代文本，或者替代文本有問題或重複。」——WebAIM Million
所有圖像都應有替代文本，以將其含義傳達給屏幕閱讀器用戶。
屏幕閱讀器是供盲人或視力障礙者使用的。它以另一種形式傳遞屏幕上的視覺信息，例如大聲朗讀文本。
屏幕閱讀器無法將圖像翻譯成文字。因此，有必要給每張圖像都提供簡短的描述性替代文本，屏幕閱讀器將使用它們來向用戶傳達圖像的內容和目的。
如何修復
替代文字應簡短且具有描述性。它應該描述圖片的內容和目的，同時避免無關緊要的細節，以免稀釋有用的細節。
將替代文本添加到圖像有三大方法：
如果使用 img 標籤顯示圖像，則可以使用 alt 屬性。如果顯示的圖像帶有另一個標籤，例如 div 的背景圖像，則可以使用 aria-label 屬性。如果圖像是由另一個元素的內容描述的，則可以使用 aria-labelledby 屬性。<!-- Missing alternative text --> <img src="cow.jpg" /> <div /> <div aria-labelledby="non-existent" /> <!-- With alternative text --> <img src="cow.jpg" alt="a sad seal" /> <div aria-label="an angry alligator" /> <div aria-labelledby="my-label" /> <div id="my-label">a happy hyena</div> 如果圖片是純裝飾性的，則可以給圖片加上替代文字""，以指示屏幕閱讀器不要讀出它。這樣屏幕閱讀器就不會讀出無用的信息了。
<img src="decoration.jpg" alt="" /> 空連結和空按鈕
連結和按鈕文本應該能被屏幕閱讀器識別。當圖像用作連結或按鈕時，圖像的替代文本也應該能被識別。
在 Web 上，連結和按鈕通常顯示為符號或圖像。當空間有限時（例如在較小的屏幕和行動裝置上），這一特性特別有用。但是，屏幕閱讀器就很難將這些元素的目的傳達給用戶。
例如，我們習慣用帶有「+」號的按鈕表示向列表中添加內容的目的，或者用帶有徽標的按鈕來表示連結。
<!-- Missing descriptive labels --> <button>+</button> <a href="..."> <img src="twitter.svg" /> </a> 通過屏幕閱讀器閱讀時：
該按鈕將被讀為「加號按鈕」。該連結將被讀為圖像文件名，或所連結頁面的 URL。如果你可以看到整個屏幕，並了解按鈕 / 連結的上下文，那麼這些描述理解起來是會很容易的；但是屏幕閱讀器無法提供這麼多細節。
如何修復
可以使用 aria-label 和 aria-labelledby 屬性向按鈕和連結添加說明。然後，屏幕閱讀器將讀取這些說明，從而使用戶對元素的用途有更清晰的理解。
<!-- With descriptive labels --> <button aria-label="Add a playlist">+</button> <a href="..." aria-label="View our Twitter page"> <img src="twitter.svg" /> </a> 缺少表單輸入標籤
「420 萬份表單輸入中有 55％沒有正確地 [標記]」——WebAIM Million
表單中的每個元素都應具有以編程方式關聯的標記（label）元素。
要理解每個表單元素的目的，就需要清晰的表單標記。用戶通常可以根據標記與元素的接近程度或元素的佔位符之類的信息來推斷出這些目的。但是，屏幕閱讀器無法做出這些假設，因此需要標記以編程方式與對應的元素相關聯。
單擊以編程方式關聯的標記元素也會激活該控制項。如果能提供較大的可點擊區域，就可以讓運動技能受損的用戶或使用小屏幕的用戶受益。
如何修復
將標記添加到表單元素的方法主要有以下三種：
將輸入元素嵌套在標記元素內。為標記提供一個 for 屬性，該屬性等於輸入元素的 ID。給輸入元素一個 aria-labelledby 屬性，該屬性等於充當標記的元素 id。<!-- Missing input labels --> <label>Name</label> <input /> <div>Name</div> <input /> <!-- With input labels --> <label>Name: <input /></label> <label for="name">Name</label> <input id="name" /> <div id="name">Name</div> <input aria-labelledby="name" /> 缺少文檔語言
HTML 文檔元素應包含有效的 lang 屬性。
用戶配置屏幕閱讀器時會選擇默認語言。如果開發人員未指定網站的語言，則屏幕閱讀器將使用用戶設置的默認語言。
如果用戶會說多種語言，則他們可能會訪問那些與屏幕閱讀器默認語言不同的網站。如果開發人員使用了錯誤的語言庫，那麼閱讀器的單詞發音會很奇怪，讓用戶無法使用網站。
如何修復
將 lang 屬性添加到 html 元素，該元素的值表示網站的主要語言。該屬性的可能值可以在 IANA 語言子標籤註冊表中找到，也可以使用語言子標籤查找工具找到。
<!-- Missing lang attribute --> <html> <!--document head and body--> </html> <!-- With lang attribute --> <html lang="en"> <!--document head and body--> </html> 如果網站中的語言發生變化，則可以使用另一個 lang 屬性來明確。如果語言是從右到左書寫的，則還應使用 dir 屬性來明確。
<p>Text in one language <span lang="es">texto en otro idioma</span></p> <p lang="ar" dir="rtl"> </p> 小結
「對於希望創建高質量網站和 Web 工具，並且不排斥人們使用其產品和服務的開發人員和組織來說，可訪問性是至關重要的。」——W3C，可訪問性簡介
在構建網站時，開發人員往往很難想起來在網站中包含輔助功能，尤其是當開發人員自己並不會從這些功能中受益時更是如此。所幸我們有很多工具和資源可以提供幫助。
如上所述，Lighthouse 是用於檢查網站質量的優秀工具。它可以創建多個類別的審核，包括性能、SEO 和可訪問性等。它還提供了很多瀏覽器擴展，如果你使用的是谷歌 Chrome 瀏覽器，則它已經內置在 Chrome DevTools 中了。
Deque 還提供了適用於 Chrome 和 Firefox 的 Axe 瀏覽器擴展。與 Lighthouse 一樣，這個擴展程序也能列出當前頁面的可訪問性問題。選擇一個問題後，它就會高亮顯示問題的每個要素。它還提供了諸如問題所在和問題嚴重性之類的細節信息，並提供了一個連結供你了解更多信息。
在這些工具的幫助下，我們就可以輕鬆地改善網站的可訪問性，並幫助實現 Web「為所有人服務，不管他們的硬體、軟體、語言、位置或能力如何都不影響」這個目標。
原文連結：https://blog.scottlogic.com/2020/07/02/6-most-common-accessibility-problems.html
關注我並轉發此篇文章，私信我「領取資料」，即可免費獲得InfoQ價值4999元迷你書！