iT邦幫忙

2021 iThome 鐵人賽

DAY 19
1
自我挑戰組

新手全端工程師的職場成長歷程系列 第 19

Day19:【技術篇】無障礙檢測(freego)方式

  • 分享至 

  • xImage
  •  

一、前言

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

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

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

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


本文同步發佈於我的個人網站 Annie Code Life


上一篇
Day18:【技術篇】HTML的冷門使用技巧
下一篇
Day20:【技術篇】無障礙網頁之前端切版基本概念
系列文
新手全端工程師的職場成長歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
kk00915
iT邦新手 4 級 ‧ 2021-10-07 23:20:06

祝媽媽生日快樂!!

我要留言

立即登入留言