7個可測試網站可訪問性的工具（完善網頁無障礙模式）

1. 谷歌燈塔

谷歌插件:

https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

安裝完成后，打開頁面，點擊燈塔圖標，選擇查詢pc端還是m端網址進行檢查：

針對具體的查詢結果，進行修正:

2. Siteimprove Accessibility Checker

谷歌插件：

https://chromewebstore.google.com/detail/siteimprove-accessibility/djcglbmbegflehmbfleechkjhmedcopn?hl=en

可以檢測頁面的具體問題，并提供解決方案：

3. Accessibility Insights for Web

谷歌插件：https://chromewebstore.google.com/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni

可以檢測頁面的具體問題，并提供解決方案，如顏色修改為哪個，可實現合格的對比度。

檢測內容：

每個紅色的感嘆號都可點擊，并顯示出解決方法：

相關文檔：https://accessibilityinsights.io/docs/web/overview/

4. ANDI 可訪問性測試工具

安裝網址：https://www.ssa.gov/accessibility/andi/help/install.html

在Chrome 上安裝 ANDI：

1. 按 Ctrl + Shift + O 調出書簽管理器。

2. 選擇書簽管理器右上角的 kebob 菜單按鈕（三個垂直點）以打開上下文菜單。

3. 選擇“添加新書簽”。

4. 將書簽命名為“ANDI”。

5. 復制并粘貼 ANDI JavaScript URL：
   javascript:void((function(){andiScript=document.createElement('script');andiScript.setAttribute('src','https://www.ssa.gov/accessibility/andi/andi.js');document.body.appendChild(andiScript)})());

6. 按“保存”。

示例：

ANDI可以檢測6項可訪問內容：

• 可聚焦元素

• 圖形/圖像

• 鏈接/按鈕

• 結構

• 顏色對比

• 隱藏內容

如下截圖：

5. Headings Help工具

谷歌插件：https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=en

列出帶有H1-H6標題信息的部分，并提供有關其級別和正確層次結構中任何中斷的可選信息，有關結構錯誤的可選詳細信息。

6. Validator.w3.org工具

打開可訪問性在線測試網址https://validator.w3.org/，輸入要檢測的網址：

查看測試結果，重點關注警告和錯誤提示:

7. Webaim測試工具

可訪問性在線測試工具網址：https://wave.webaim.org/

輸入要查詢的網站域名：

得到頁面的可訪問性指標方面哪些做的好，哪些需要改進：

這個工具也有谷歌插件：https://chromewebstore.google.com/detail/jbbplnpkjmmeebjpijfedlgcdilocofh

擴充:

要創建一個無障礙網站，您需要遵循四個主要原則：

您的網站是可感知的、可操作的、可理解的和強大的。

1. 可感知

首先，訪問者必須能夠感知或理解并了解您在網站上呈現的內容。

請記住，“感知”并不總是等同于用眼睛看——失明或視力低下的用戶經常使用屏幕閱讀器軟件，該軟件將文本轉換為合成語音或盲文字符。在創建和更新網站時考慮所有可以讓您的內容盡可能易于感知的方法。

2. 可操作性

可操作性網站意味著您的訪問者可以不受干擾地使用它。這還意味著所有訪問者都可以使用網站功能的每個部分，從導航到聯系頁面到從菜單中選擇鏈接再到播放視頻。

一般來說，保持網站簡潔可以讓網站更易于操作。此外，您可以考慮放棄多余的功能，因為這些功能可能會妨礙殘障人士和有限制的用戶。

3. 易于理解

此外，您的網站內容必須易于理解。是的，這既包括文字內容，也包括圖片內容。

請記住，有各種認知障礙的人正在訪問您的網站。如果您的網站過于冗長或混亂，您就會孤立有價值的用戶。這也會給不懂您網站主要語言的人帶來麻煩。保持網站內容易于理解。

這也適用于您的網站結構。您的頁面必須直觀地組織，并且導航必須隨時可用。

4. 強大的

最后，您的內容應該足夠強大，以便使用各種輔助技術（例如屏幕閱讀器）的用戶可以輕松理解。要實現這一點，請編寫允許輔助技術無需視覺參考即可解析您的代碼的 HTML。