作者:黃玫瑋 / 臺灣大學計算機及資訊網路中心程式設計組 資深專員
無障礙網頁的開發比起一般網頁開發來的繁瑣,但提供無障礙環境不僅能保障身心障礙者獲取資訊的權利,還能提升使用者瀏覽體驗,讓服務資訊的推廣更無障礙性,本文將簡單介紹幾個工具和平台來協助檢測網站是否符合無障礙標準,提升網站的包容性。
說明
無障礙網頁設計的宗旨是希望對於視覺、聽覺、身體和認知上有障礙的人士,減輕訪問網站可能會面臨困難,在法源上,依照身心障礙者權益保障法第52-2條第1項規定,各級政府及其附屬機關(構)、學校所建置之網站,應通過第一優先等級(即檢測等級A)以上之無障礙檢測,國際上也有相關的WCAG(Web Content Accessibility Guidelines)無障礙指南和ADA(美國殘疾人士法案)法律要求。
開發無障礙網頁不僅能保障身心障礙者獲取資訊的權利,還能提升使用者瀏覽體驗,讓服務資訊的推廣更具包容性,如替代文字(Alt text)在檢測等級A指引1.1提到,要為任何非文字的內容提供相等意義的替代文字,使這些內容能依人們的需求,轉變成大字版、點字、語音、符號或簡化過的語言等不同型態,這對於視障使用者使用的螢幕閱讀器至關重要,提供影象的文字描述時,替代文字幫助他們理解影象的內容和背景,也幫助一般使用遇到影像未如預期顯示時,可即時獲取文字說明資訊。
一般在開發無障礙網頁是枯燥與繁瑣的,我們可善用一些工具和平台來輔助開發與測試網站是否符合無障礙標準,識別潛在的無障礙問題,並提供改進建議,提升網站的包容性。
無障礙工具測試及支援
目前常見的幾款協助工具,簡要介紹如下:
- Freego 2測試軟體:
此為數位發展部基於Java開發的軟體,並使用多種瀏覽器的自動測試程式來進行檢測,其檢測結果為申請標章時必要的報告,是每個申請無障礙檢測的開發者必學習的工具。
下載網址:https://accessibility.moda.gov.tw/Download/Category/70/1
- WAVE (Web Accessibility Evaluation Tool):
由 WebAIM 提供的工具,用於檢查網站的無障礙性並提供視覺化的問題標記,提供輸入網址檢測、瀏覽器擴充工具測試、提供獨立API給開發者嵌入系統測試,是個很方便即時自動化檢測工具。
WAVE官網:https://wave.webaim.org/
- NVDA (NonVisual Desktop Access):
此檢測工具是由NV Access開發的免費開源工具,適用於Windows作業系統上的一套螢幕報讀軟體,其特色為透過語音合成的方式報讀螢幕上的文字訊息或以點字在點字顯示器上呈現,它可提供視障者以非視覺方式操作微軟視窗作業系統及其它應用程式,方便讓我們模擬網站被讀取出來的資訊。
NVDA官網:https://www.nvaccess.org/
- Colour Contrast Analyser (CCA):
由TPGi(The Paciello Group, Inc.)開發,基於Electron框架開發的開源工具,用於檢查文字和視覺元素的色彩對比度,確保其符合WCAG無障礙指南的標準。
CCA官網:https://developer.paciellogroup.com/color-contrast-checker/
- Lighthouse:
Google開發的開源工具,用於分析網站性能、SEO和無障礙性,主要針對網頁進行基本的「SEO狀態檢查」,找出可能需要改善之處。
Lighthouse官網:https://developers.google.com/web/tools/lighthouse
結語
無障礙網頁開發時,不要被一堆法令及規則給限制住,只要謹遵基本網頁標準使用HTML與CSS,並善用檢測工具提供的建議逐項改善,便能設計出符合無障礙標準的親和性網站。
參考資訊:
- 身心障礙者權益保障法第52-2條第1項:https://law.moj.gov.tw/LawClass/LawSingle.aspx?pcode=D0050046&flno=52-2
- 各級機關機構學校網站無障礙檢測及認證標章核發辦法:https://law.moj.gov.tw/LawClass/LawAll.aspx?pcode=K0060095
- 數發部對於無障礙檢測等級說明:https://accessibility.moda.gov.tw/Questions/Detail/3284?Category=18
- 數發部網站無障礙規範之十三指引:https://accessibility.moda.gov.tw/Accessible/Guide/68
- 網站設計新趨勢的無障礙化:https://accessibility.moda.gov.tw/Accessible/Detail/2215?Category=3