html scss 無障礙 無障礙網站 AA

無障礙網站:新手村遇到的二三事(下)

王淳藝 Celia Wang 2025/09/03 18:00:00
14

上一篇我們談到了無障礙網站的介紹、大方向的規範,以及實際在切版上最常需注意的應用,本篇將著重介紹如何檢測自己的程式碼是否通過無障礙標準。

 

-

 

一、如何確認自己切版的網頁有無符合無障礙規範

 

列出了這麼多的規範,切版時也一一遵守了,但無障礙網站真的有這麼容易取得資格嗎?有沒有「第三人」來把關呢?

當然有!要取得無障礙的資格還需要使用相關檢測軟體徹底掃描一遍,軟體檢測肯定比人工還要精準。

能夠用於檢測無障礙網頁程式碼的軟體有很多,但筆者這邊還是推薦由數發部建議的 Freego 檢測工具 會較為精準,也較能讓各方取得檢測共識。

 

使用 Freego 有幾個重點需要注意:

 

1. 必須在擁有32位元的JRE環境之下執行:

    用於執行 Freego 的裝置必須有JRE環境,若無則須先下載並安裝

 

2. 必須使用 Windows 系統:

    目前 Freego 只支援 Windows,沒有 macOS 版本,所以在 Mac 上是沒辦法直接安裝使用的,若只有 MacOS 的話有以下替代方案:

   

     - 改用線上檢測工具如:

        WAVE Web Accessibility Evaluation Tool

       但需要注意的是,替代工具只是幫助檢測程式碼有無符合規範,並不能當作申請無障礙標章的依據,最正式的做法還是得用 Freego。

 

      - 架設 Windows 環境

       用 Parallels Desktop、VMware、VirtualBox 等跑 Windows,再裝 Freego,但這個步驟很麻煩,不如直接使用 Windows 電腦。

    

 

 

 

二、如何使用 Freego 檢測

執行 Freego 以後的介面也很淺顯易懂,下面做個簡易的圖解:

 

 

1.版本資訊:顯示檢測軟體的版本別

 

2. 操作選單:檢測軟體主要功能的選單列

 

3. 受測網址輸入框可輸入待檢測的網址

 

4. 檢測類型選項提供檢測方式的下拉式選單,可選擇全網站檢測或單一網頁檢測。預設為「全網站」檢測

 

5. 檢測等級選項提供選擇檢測等級的下拉式選單,共有 A、AA、AAA 三種等級,預設為 A 等級

 

6. 帳號密碼登錄資訊提供檢測須登入後才能瀏覽的登入操作。登入網址須與受測網址是相同網域,不支援跨網域或以社群媒體的登入方式

 

7. 工具列:提供常用的操作功能的圖示按鈕介面

 

 

 

8. 檢測結果視窗顯示已檢測的網址歷程與檢測結果,視窗內容說明如下:

 

     • 檢測序號:受檢測網址的序號

     • 檢測結果:通過為 YES;不通過為 NO;連線逾時或轉址到非受測網域的為 --

     • A、AA、AAA:顯示該檢測等級下,軟體檢測未通過的檢測碼數量

     • 網址:顯示受檢測的網址

     • 在檢測結果視窗以 ctrl+滑鼠點選受測紀錄,可複選不連續的受測網址

 

 

---

 

有了以上的檢測結果後,就可以參考檢測報告針對沒有通過的頁面進行修改,直到結果為 YES 為止。

在撰寫無障礙網頁的路上很辛苦,因為要符合很多細節、很多規定,但是全數通過以後的成就感也滿滿,同時也可為更多族群帶來更便利的網頁使用體驗,也是一個很棒的成就呢~!

 

 

王淳藝 Celia Wang