一、前言

這篇要介紹的是當你的網站要申請無障礙標章時，必須要做的「無障礙檢測」。一個好的網站，是建立在任何人(包含視力不佳者、視覺障礙者與聽覺障礙者)都能體驗良好的設計上的。「無障礙網頁」就是使網站的使用性達到一定的標準，使網站的操作達到便利無障礙。

二、檢測無障礙的前置作業

當你的網站準備就緒，也已經上線有自己的網址時，可以依照以下說明將檢測環境準備好。

1. 本篇介紹之依據標準

國家通訊傳播委員會 無障礙網路空間服務網

2. 必要條件

  1. 本機先安裝java。
  2. 下載freego壓縮檔(檢測工具)。

3. 執行freego.exe(綠色icon的軟體)

三、功能介紹

檢測環境準備好後，可以發現介面其實滿易懂(陽春)的，主要幾個會用到的功能列在下面，並附上功能的icon圖示讓大家參考。

icon 主要功能 備註
輸入要檢測的網址
檢測時要排除的網址 會出現小彈窗，新增完即可關閉該彈窗。
執行 - 會需要等一陣子，也會彈出一個瀏覽器(不斷跳轉/檢測)，兩個視窗都不可關閉。
查看執行結果 - show no 可看有問題的項目
查看有問題的項目之詳細記錄 - 先點選執行後有問題的項目，在點選此icon，即可以看到一個彈窗，裡面紀錄該網址裡的檢測問題。

四、匯出檢測報告

執行檢測完畢後，會跳出彈窗告訴你檢測已完成。如果要記錄逐次的檢測結果，可看到freego介面之上方工具列選單中有一項是「報告」，點進去後會有以下兩項，可依需求將該次檢測報告留存。

  • 單一網頁檢測報告(cat格式檔案)
  • 全網站檢測報告(htm格式檔案)➔我通常都是使用這個。

五、若遇到freego與chrome更新的問題：

有時候可能會跳出視窗說無法檢測，問題可能是更新chrome的一個檔案就可以解決。

  • 下載網址：選擇倒數第二個下載。
  • 解壓縮後，會看到一個chromedriver.exe的應用程式檔案，將其放到你當初下載freego的資料夾裡即可。p.s.下圖是我自己安裝的位置：

四、結論與自我鼓勵

以前做side project時，從未想過要設計或考量到無障礙設計規範，是因為現職工作有接觸到公部門類型案件，才有機會學習到這個領域，算是很難得可貴的事情，當檢測完成後，接下來就是把錯誤訊息一一解決了！
今天一樣是在醫院度過忙碌的一天，也是媽媽的生日，偷偷用今天的技術文章結尾祝福我的媽媽生日快樂！(我猜應該沒人在鐵人賽這樣過吧…但我得為自己打打氣♡)