本文翻譯自《Beyond automatic accessibility testing: 6 things I check on every website I build》。如有翻譯不當之處，請不吝指正。
我剛對客戶端完成一次可訪問性審覈（accessibility audit），然後我決定將我在審覈和構建站點過程中執行的各種測試分享給大家。你可以立即應用到項目中，而無需學習一種工具或軟件。
Step 0：Automatic tests 自動化測試
我進行可訪問性檢測的第一件事就是使用LightHouse檢查一下有沒有明顯的錯誤。自動化可訪問性測試很好，但也只是檢查了所需要全部測試的子集而已。就算得到100分或0個錯誤，但實際上也沒有完成。這隻意味着我們爲手工測試打下了基礎。
Step 1：Check image descriptions 檢查圖片描述
我執行的第一個半手工測試是檢查圖片是否都有描述以及描述是否正確。我使用了一個叫做Web Developer的拓展（譯者注：文中的鏈接是firefox插件，chrome商店同樣能找到該插件）。我們可以高亮沒有alt屬性的圖片或在圖片旁邊展示alt屬性值。
Step 2：Disable all styles 禁用所有樣式
Web Developer拓展的另一個特性是能禁用頁面的CSS。通過禁用CSS，你可以執行一些檢查：
- 沒有CSS（以防不能加載）網頁能工作嗎？
- 頁面中的元素順序有意義嗎？
- 圖片和圖標尺寸正確嗎？
- 文檔結構合理嗎？
![在這裏插入圖片描述]()
Step 3: Validate HTML 驗證HTML
我們能使用W3C Markup Validation Service來檢查HTML結構。驗證服務不能完成所有的事情，但在找出像重複的id或損壞的aria引用這些HTML中明顯的bug中非常有用。
Step 4: Check the document outline 檢查文檔大綱
合理的文檔大綱很重要。像應該以h1開頭，然後是h2、h3等依次排列。這會對搜索引擎和屏幕閱讀器很友好，因爲它們在導航站點時可以從一個標題跳到另一個標題。
可以使用W3C Markup Validation Service來驗證大綱，也可以使用totally工具來進行驗證（如上圖所示）。
Step 5: Grayscale mode 灰度模式
我使用一款叫做High Contrast的插件來觀察站點在灰度模式下的表現。這是一項很重要的檢查，因爲這能告訴我們某些設計是否只能在有顏色時工作。我們應該確保不會僅用顏色傳達信息。鏈接是一個很好的例子，它們應該有下劃線，以使之和普通文本區分開來。下劃線很美好！
Underline your fucking links you sociopaths. 給你的社交鏈接加上下劃線
- Heydon Pickering
我們不需要安裝瀏覽器拓展，使用CSS能實現類似的效果。
body {
filter: grayscale(100%);
}
Step 6: Use the keyboard 使用鍵盤
移走鼠標，按tab鍵瀏覽頁面，查看是否可以在沒有鼠標、觸摸板的情況下使用站點的每個部分。tab鍵是個很強大的測試工具，能告訴我們關於站點的很多東西：
- focus樣式清晰可見嗎？
- 任何可聚焦的東西都表現正常嗎？
- 按鈕是真的嗎？
- 使用鍵盤的整個交互好嗎？
- 是否正確的管理了focus？
- 是否能正確地隱藏或展示元素？
- 視覺順序與DOM順序是否匹配？
- 能在沒有鼠標的情況下使用自定義JS組件嗎?
甚至有個由Marcy Sutton構建的用於禁用鼠標光標的npm包。
故事還沒完，我們還能檢查更多東西，但現在就這些了。我將在另一篇文章中分享更多。