毫無疑問，您一定很想了解如何能盡最大的可能使更多的用戶訪問你的網(wǎng)站。 但是閱讀所有的指南和標(biāo)準(zhǔn)可能對(duì)你來說有點(diǎn)壓力。 不過，今天你可以在此處找到最新的W3C建議，但是你是否需要了解每個(gè)點(diǎn)，并遵循每個(gè)建議，這就需要你的判斷了。

今天，我們將嘗試使用一些工具和資源來幫助提高網(wǎng)站的可訪問性。

無論你是希望擁有足夠的視覺對(duì)比度，在不同的設(shè)備上都能很好的工作，甚至是創(chuàng)建可訪問的電子郵件，這些建議都能滿足你的需求！

1.Color Safe


Color Safe可幫助你根據(jù)WCAG只能檢查文本和背景顏色對(duì)比，檢查（甚至創(chuàng)建）可增強(qiáng)視覺的調(diào)色板。 該工具和標(biāo)準(zhǔn)使用基于比率的公式來確定所有人都可以閱讀。

WCAG指南建議小文本的對(duì)比度為4.5，大文本（超過24點(diǎn)的任何對(duì)象）的對(duì)比度為3。

只需輸入你的顏色 - 基于HEX代碼 - 字體選擇和大小就可以馬上生成調(diào)色板。 你可以立即檢查比率，并可以看到其他類似的顏色搭配。 根據(jù)你的字體和大小，查看是否有類似的，可能是更好的選擇。

2.NoCoffee



NoCoffee是一款Google Chrome瀏覽器擴(kuò)展程序，可幫助你以與視障人士相同的方式查看你的網(wǎng)站設(shè)計(jì)。

它可以檢查并顯示以下內(nèi)容：

· 低視敏度情況下的小文本或點(diǎn)擊目標(biāo)；

· 文本和背景元素的低對(duì)比度問題；

· 色盲；

· 雪花，眩光，鬼影和白內(nèi)障情形下；

· 眼球震顫，或眼睛的快速不自主運(yùn)動(dòng)；

· 受阻的視野。

3.Contrast Checker



Contrast Checker允許你在屏幕上輸入背景和前景色，并通過即時(shí)的顏色編碼基于幾個(gè)視覺標(biāo)準(zhǔn)來立即檢查該搭配是否合適。

該工具的優(yōu)點(diǎn)包括能夠在彩色和灰度選項(xiàng)之間切換，共享顏色樣板以及從圖像中提取顏色。 你還可以保存PDF樣本，它是一個(gè)簡(jiǎn)單的工具，但是具有許多功能，任何人都可以快速使用。

它還提供了顏色比率，如WCAG指南中所述。

4.Tota11y



Tota11y是一個(gè)JavaScript文件，它在文檔的底角放置了一個(gè)小按鈕。 用它可以擴(kuò)展一個(gè)工具欄，其中包含用于不同輔助功能檢查的多個(gè)插件。

· 標(biāo)題和標(biāo)題順序是否違規(guī)；

· 鏈接缺少或混淆的文本；

· 輸入中缺少的標(biāo)簽；

· 沒有alt標(biāo)簽的圖像；

· 標(biāo)簽是ARIA的標(biāo)志；

· 屏幕閱讀器，你可以像屏幕閱讀器一樣“閱讀”該網(wǎng)站。

5.WAVE



WAVE，或網(wǎng)站輔助功能評(píng)估工具是一個(gè)強(qiáng)大的檢查集合。

該工具使用與側(cè)邊欄中的信息相關(guān)的圖標(biāo)的視覺疊加，以提供從顏色對(duì)比度到冗余標(biāo)題到HTML和結(jié)構(gòu)元素鏈接的所有內(nèi)容的詳細(xì)信息。

免費(fèi)版本的檢查器幾乎可以為你提供有關(guān)單個(gè)頁面的任何信息，但WAVE還包括針對(duì)多站點(diǎn)所有者或希望一次查看多個(gè)頁面的用戶的付費(fèi)計(jì)劃。 它還包括Chrome和Firefox瀏覽器的擴(kuò)展，可以在私有環(huán)境中檢查Intranet，受密碼保護(hù)，動(dòng)態(tài)生成或敏感的網(wǎng)頁。

6.508 Checker



508 Checker可以測(cè)試URL以確定網(wǎng)站是否符合美國508合規(guī)性指南，這是法律要求的任何接受聯(lián)邦資助的組織站點(diǎn)都必須通過的要求。

雖然此工具是免費(fèi)的，但你必須注冊(cè)以查看掃描的完整結(jié)果。

該網(wǎng)站還包括其他工具和資源，包括一個(gè)測(cè)驗(yàn)，幫助組織了解他們是否符合508合規(guī)性以及高等教育，非營利組織和政府機(jī)構(gòu)的特定資源。

7.HTML_CodeSniffer



HTML_CodeSniffer是一個(gè)客戶端腳本，用于檢查源代碼并查找違反已定義標(biāo)準(zhǔn)的內(nèi)容。

將代碼直接粘貼到網(wǎng)站上以進(jìn)行檢查或使用書簽。

它易于使用，你可以選擇要顯示的信息類型 - 錯(cuò)誤，警告或通知，并查看詳細(xì)說明檢查中有關(guān)任何問題的報(bào)告。

8.Accessible Email


Accessible Email是一個(gè)在線檢查器和HTML編輯器，可幫助你在發(fā)送之前改進(jìn)電子郵件簡(jiǎn)報(bào)的代碼。

有了這么多數(shù)字通信和來自電子郵件的潛在客戶，它不應(yīng)該是可訪問性方面被遺忘的元素之一，但它通常是。 Web上可訪問性的相同規(guī)則也適用于電子郵件。

該工具可免費(fèi)使用，旨在促進(jìn)電子郵件營銷的可訪問性和可用性。

9.Amara




Amara是一個(gè)為視頻創(chuàng)建字幕和隱藏字幕的工具。

提供視覺或其他語言類連接的方式，可以向更多人說明和表達(dá)你的設(shè)計(jì)元素，特別是如果視頻是設(shè)計(jì)的關(guān)鍵元素。

此工具包括免費(fèi)和付費(fèi)計(jì)劃，可以輕松地將語言以可讀格式顯示在屏幕上，該格式適用于YouTube等網(wǎng)站和視頻流平臺(tái)。

10.MobiReady



MobiReady以可視格式提供移動(dòng)輔助功能測(cè)試，并提供結(jié)果報(bào)告，以便你可以查看你的網(wǎng)站在最小的設(shè)備上運(yùn)行的實(shí)際體驗(yàn)。

根據(jù)Alexa 1000對(duì)你的網(wǎng)站進(jìn)行基準(zhǔn)測(cè)試，Alexa 1000是世界頂級(jí)網(wǎng)站排名的標(biāo)準(zhǔn)，通過推薦獲得詳細(xì)的技術(shù)結(jié)果，并在不同的屏幕上查看你的網(wǎng)站設(shè)計(jì)的效果圖，包括高，中，低設(shè)備。

該測(cè)試的最佳部分之一是它可以提供多達(dá)幾十個(gè)不同方面的檢測(cè)和得分，并且對(duì)任何“低分”或“失敗”選項(xiàng)都提供了改進(jìn)建議。

總結(jié)

在網(wǎng)站設(shè)計(jì)的可訪問性方面，考慮所有類型用戶的可用性和可讀性非常重要。 考慮元素的顏色，大小和位置，標(biāo)題和副標(biāo)題，適當(dāng)?shù)腍TML和結(jié)構(gòu)甚至電子郵件，以便為盡可能多的人提供最佳體驗(yàn)。

檢查可能適用于你的項(xiàng)目的任何區(qū)域或國家合規(guī)性規(guī)則也很重要，例如上面提到的508合規(guī)性標(biāo)準(zhǔn)。

最好不要在可訪問性方面犯錯(cuò)。 可以從調(diào)色板調(diào)整顏色或提高字體大小開始，以便更多人可以輕松地了解屏幕上的內(nèi)容。