無障礙網頁設計的好幫手

每年的今天 5 月 20 日是全球無障礙體認日（Global Accessibility Awareness Day），我想來分享一下我在上一個專案裡使用到的網頁可存取性（web accessibility）設計工具。因為這個專案內容是屬於公共部門機構（public sector bodies）的類別，我特別參考了英國政府對網頁無障礙設計的規範和建議，也試用了英國政府介紹的網頁可存取性設計工具，和其它在工作過程中發現到的，我想趁著今天無障礙體認日來分享幾個我覺得簡單好用的工具，希望有更多的力量來投入改善科技的使用經驗。

WAVE 網頁可存取性自動檢測的瀏覽器外掛工具

WAVE 的報告畫面

WAVE 是個簡易、好用又免費的網頁無障礙設計自動檢測工具。只要安裝在瀏覽器（Firework 或 Chrom），你就可以用它來查看目前網頁有些不符合 WCAG 規範的物件。如果不加裝在瀏覽器上，你也可以在它的網站上（https://wave.webaim.org）輸入你要測試網頁的網址，也可以達到一樣的檢測效果。

這個工具執行時會自動檢測網頁的編輯結構、HTML 標籤、文字色彩的對比。它的檢測報告畫面很簡單易懂，也可以快速查看相關細節或是相關資訊。特別一提的是它的工具裡有幫助你查看前景文字和背景色的對比值，很方便用來修訂網頁文字顏色的顯示，以符合網頁無障礙設計的規範。

Deque 的網頁自動檢測報告

Deque 的自動檢測網頁無障礙設計報告的網頁

Deque 也是無障礙設計工具的專家，它的 Axe 自動測檢工具就是目前英國政府用來檢測公共部門網站存取性的工具，在 Deque 的網站上，它有一個自動檢測報告工具網頁：https://audit.deque.com

在這裡你可以提供你要測試網頁的網址，讓系統自動檢測你的網頁內容是否符合網頁無障礙設計的規範。雖然這類自動檢測的網站很多，但很多都要提供電子郵件或填寫表格才能看到報告，而 Deque 這個網站會立即顯示測試的重要結果，讓你快速發現無障礙設計的不足。如果想要更詳盡的報告說明或需要進一步協助，你可以連結他們的服務。

相較於 WAVE，它更合適非網站技術人員用來了解網頁無障礙設計的基本問題，因為它的檢測結果報告用很口語化的方式表達網頁無障礙設計的基本問題。在免費付費的狀態下，一次只能檢測一頁，只含有基本的無障礙檢查項目，每天也有使用次數的限制，但仍是很有用的工具。我覺得 UX/UI 設計者很可以用它的報告用來讓非網站技術人員了解目前頁面的無障礙設計問題，在開發團隊裡越多人了解網頁無障礙設計的不足，也會更理解所需要的時間和資源來改善使用者經驗。