1. 谷歌燈塔

谷歌插件:

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

安裝完成后，打開(kāi)頁(yè)面，點(diǎn)擊燈塔圖標(biāo)，選擇查詢pc端還是m端網(wǎng)址進(jìn)行檢查：

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

2. Siteimprove Accessibility Checker

谷歌插件：

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

可以檢測(cè)頁(yè)面的具體問(wèn)題，并提供解決方案：

3. Accessibility Insights for Web

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

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

檢測(cè)內(nèi)容：

每個(gè)紅色的感嘆號(hào)都可點(diǎn)擊，并顯示出解決方法：

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

4. ANDI 可訪問(wèn)性測(cè)試工具

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

在Chrome 上安裝 ANDI：

1. 按 Ctrl + Shift + O 調(diào)出書(shū)簽管理器。

2. 選擇書(shū)簽管理器右上角的 kebob 菜單按鈕（三個(gè)垂直點(diǎn)）以打開(kāi)上下文菜單。

3. 選擇“添加新書(shū)簽”。

4. 將書(shū)簽命名為“ANDI”。

5. 復(fù)制并粘貼 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可以檢測(cè)6項(xiàng)可訪問(wèn)內(nèi)容：

• 可聚焦元素

• 圖形/圖像

• 鏈接/按鈕

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

• 顏色對(duì)比

• 隱藏內(nèi)容

如下截圖：

5. Headings Help工具

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

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

6. Validator.w3.org工具

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

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

7. Webaim測(cè)試工具

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

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

得到頁(yè)面的可訪問(wèn)性指標(biāo)方面哪些做的好，哪些需要改進(jìn)：

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

擴(kuò)充:

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

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

1. 可感知

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

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

2. 可操作性

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

一般來(lái)說(shuō)，保持網(wǎng)站簡(jiǎn)潔可以讓網(wǎng)站更易于操作。此外，您可以考慮放棄多余的功能，因?yàn)檫@些功能可能會(huì)妨礙殘障人士和有限制的用戶。

3. 易于理解

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

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

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

4. 強(qiáng)大的

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