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

1. 谷歌燈塔

谷歌插件:

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

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

針對具體的查詢結(jié)果，進行修正:

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

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

檢測內(nèi)容：

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

相關(guān)文檔：https://accessibilityinsights.io/docs/web/overview/

4. ANDI 可訪問性測試工具

安裝網(wǎng)址：https://www.ssa.gov/accessibility/andi/help/install.html

在Chrome 上安裝 ANDI：

1. 按 Ctrl + Shift + O 調(dià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項可訪問內(nèi)容：

• 可聚焦元素

• 圖形/圖像

• 鏈接/按鈕

• 結(jié)構(gòu)

• 顏色對比

• 隱藏內(nèi)容

如下截圖：

5. Headings Help工具

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

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

6. Validator.w3.org工具

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

查看測試結(jié)果，重點關(guān)注警告和錯誤提示:

7. Webaim測試工具

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

輸入要查詢的網(wǎng)站域名：

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

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

擴充:

要創(chuàng)建一個無障礙網(wǎng)站，您需要遵循四個主要原則：

您的網(wǎng)站是可感知的、可操作的、可理解的和強大的。

1. 可感知

首先，訪問者必須能夠感知或理解并了解您在網(wǎng)站上呈現(xiàn)的內(nèi)容。

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

2. 可操作性

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

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

3. 易于理解

此外，您的網(wǎng)站內(nèi)容必須易于理解。是的，這既包括文字內(nèi)容，也包括圖片內(nèi)容。

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

這也適用于您的網(wǎng)站結(jié)構(gòu)。您的頁面必須直觀地組織，并且導航必須隨時可用。

4. 強大的

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