如何進行基本的可訪問性審核
已發表: 2017-08-09因此，您最近學習了很多關於可訪問性的知識，但現在您想親自檢查您的網站，看看您需要改進的地方。 你怎麼做呢？ 是時候進行可訪問性審核了！ 在本教程中，我將向您展示基本可訪問性審核的技巧，這將使您走上擁有更易於訪問的網站的道路。
正如您從我的概述系列中所記得的那樣，一個可訪問的網站是可感知的、可操作的、可理解的和健壯的。 確保您的網站符合所有四個可訪問性支柱的測試不涉及編碼，所以不用擔心。 我們可能會安裝一兩個 Chrome 擴展程序，但您稍後會感謝我的。 讓我們開始吧！
注意：本教程假設您知道如何使用 Chrome Inspector，或提供的任何瀏覽器的基本開發工具。
可感知的
從可感知開始，因為如果您的網站不能被用戶感知，他們就不知道它的存在。 在這裡，我們將關註三件事：文本替代、標題和顏色。
對於您網站上的每張不僅僅是裝飾性的圖像（意味著它是信息的重要組成部分，而不僅僅是增強功能），圖像應該具有alt屬性。 您可以通過檢查圖像的源代碼並查找屬性來檢查這一點。 如果它在那裡，那就太好了！ 現在我們需要確保屬性的值是有用的。 alt 屬性應該以告知視障用戶的方式描述圖像。 這不是將 SEO 關鍵字塞入您的網站的機會。 使您的描述簡短、切中要害且有幫助。 應該為網站內容本身保存更長的描述。
伴隨圖像的是視頻和音頻內容。 在這兩種情況下，您都需要提供某種字幕或內容轉錄。 您的視頻應啟用隱藏式字幕，或預先添加字幕。 對此進行測試就像在您的網站上啟動視頻並檢查字幕一樣簡單。
最後，我們需要測試我們的顏色。 為此，我們將安裝一個啟用灰度模式的 Chrome 擴展程序。 安裝後，再次加載您的站點並打開擴展程序。 注意難以閱讀的區域。 從對比的角度來看，這些是您的問題所在。 從那裡，禁用灰度並使用 Snook 顏色對比度檢查器檢查您的分數。 如果您手邊沒有它們，您將需要使用檢查器來獲取您的十六進制值。 請記住，任何小於 4.5（或 3.0 對於大文本）都是一個問題。
可操作
下一步是確保該站點是可操作的。 這意味著我們將測試鍵盤功能。 為此，請打開您的網站。 加載頁面後，按 Tab 鍵。 發生什麼了？ 希望會彈出一個跳過鏈接。 如果沒有，您至少應該在頁面上的第一個鏈接周圍有一個大綱。 理想情況下，您將擁有自定義樣式的:focus狀態，但最低限度應該是瀏覽器提供的。 從那裡，繼續按 Tab 鍵以確保您按照它們在頁面上出現的順序從一個鏈接轉到另一個鏈接。 如果您的注意力一直在跳躍，那麼您就會遇到需要解決的選項卡索引問題。 表單插件通常是這裡的罪魁禍首。
可以理解
接下來，我們將檢查您的網站以確保其可讀性。 畢竟，如果用戶無法閱讀您的內容，那麼擁有它有什麼意義呢？ 這裡的要求很簡單：你的網站語言可以用代碼來確定嗎？ 要檢查，請打開檢查器並查看主<html>標記。 它有lang屬性嗎？ 如果是這樣，你就清楚了。 您還需要確保使用不同語言的任何句段都應用了 lang 屬性。
還有其他對可讀性的 AAA 級檢查，但這些超出了基本審計的範圍。 不過，一般來說，除非您的目標受眾受過高等教育，否則您會希望將您的內容保持在 6 年級的閱讀水平。
站點不穩定的其他重要方面圍繞錯誤消息和上下文變化。 更具體地說，缺乏它。 當用戶給予焦點或激活輸入時，不應發生重大變化。 除非以某種方式（箭頭圖標、幫助文本等）警告用戶，否則頁面不應跳轉。 這些是您在使用鍵盤進行測試時會注意到的事情。
在測試表單時，錯誤消息也是如此。 錯誤應該清楚地顯示給用戶並留在屏幕上，以便他們可以更正錯誤。 即使是大型網站也經常出錯。 他們忘記將焦點放在頁面中有錯誤的部分，或者至少以某種方式標記它。 測試您的表格是否有錯誤，並確保信息清晰。 使用可靠的表單插件會對此有很大幫助，但不要依賴插件來完成所有工作。 您還需要確保不只是使用顏色（通常是紅色）來表示錯誤。 實際文本“錯誤”非常重要，尤其是對於紅/綠色盲的人。
除了錯誤之外，您的表格和輸入應該有明確的說明。 瀏覽您網站上的每個輸入，並確保非常清楚用戶應該做什麼。 例如，搜索表單除了放大鏡之外還應該有一些東西。 一個簡單的“搜索”標籤就足夠了。 確保您的用戶知道如何處理交互式元素。 永遠不要假設。
強大的
最後，您的網站需要健壯。 這意味著該網站可與屏幕閱讀器等輔助技術一起使用。 如果您的網站使用 HTML 格式良好，那麼您應該沒問題。 請記住，包括 Chrome 在內的一些現代瀏覽器將修復基本的 HTML 錯誤，或者至少嘗試修復它們。 測試站點穩健性的最快方法是在 Safari 中加載站點並啟用內置屏幕閱讀器 VoiceOver。 如果您的網站無法正常工作，您需要解決這些問題。
包起來
這個審計教程很快，但這就是重點。 確保您的網站可以訪問並不需要那麼長時間，並且所需的工具很少。 要記住的重要一點是，您想設身處地為一個沒有您認為作為普通用戶理所當然的能力的人著想。 保持這種心態，您的審核將確保您的網站更易於訪問。
如果您錯過了它，請查看這個關於可訪問性的系列：
- 可訪問性簡介：第 1 部分
- 可訪問性簡介：第 2 部分
- 可訪問性簡介：第 3 部分