視覺障礙者網站之設計

溫志傑/凌網科技

依據衛生福利部統計,截至2022年3月底,臺灣領有身心障礙手冊之視覺障礙者共計55,462人。在1993年臺灣成為「高齡化社會」,2018年轉邁入「高齡社會」,人口老化速度快,並有持續向「超高齡社會」邁進的趨勢。而現今社會人們非常仰賴使用電子產品瀏覽各式網站以獲取更多資訊,但當使用者的年齡逐漸到達銀髮族的階段,伴隨而來各種感官器官功能退化(含視覺)無可避免。為此,網站提供商如何提供「更友善的介面與配置」成為網頁設計時的重要課題。

臺灣政府為使機關網站能適於現今網頁科技發展,並兼顧其他感官器官障礙族群使用,頒布「無障礙網頁開發規範」作為網站開發之輔助指引。此指引規範雖然以「無障礙」為名,然而筆者竊以為一系列的措施,應避免以專為協助「身心障礙者」(特別是視覺障礙者)利用而開發,而是以提升網頁使用者體驗 (User experience) 與網頁親合力的面向來看待,特別在使用行動載具瀏覽網頁的比例持續上升,自然需更重視此發展趨勢。以下是筆者整理在打造具親合力的網站時需要注意之項目如下。

使用相對大小值 (em或rem) 之尺寸與字體設定

依據CSS上的規範,提供數種表達長度的單位。其中,px是過去網頁設計較廣泛使用的一種單位,其屬於絕對單位的數值,代表螢幕上每一個「點」 (Pixel) ,意即無論螢幕尺寸大小,該文字都會以固定的尺寸顯示,並不利於自適應網頁 (RWD) 的開發。若能使用相對大小尺寸,且在不影響整體網頁配置的情況下,可隨意調整文字的大小,亦無須左右滑動螢幕影響網頁的操作,無論對於一般的民眾,或弱視族群都能方便放大與調整字體。

文字顏色與背景色,對比值至少7:1

文字是網站傳達資訊的一種方式,除了字體大小,文字顏色與其背景色的對比也是很重要的部分。像是將文字顏色設定為黃色 (#FFFF00) ,就要避免使用如白色 (#FFFFFF) 之淺色背景,因為低對比的配置,即使圖像設計再美觀,也會讓人在閱讀上感到吃力。

另一方面,文字的字體大小也會影響對比值的使用,一般大小的對比值至少為7:1,大型文字則以4.5:1在使用上為可接受範圍。若需計算文字顏色與背景色的對比值,筆者推薦使用contrast-ratio (https://contrast-ratio.com/) 。在此網站中可選擇輸入顏色、RGB或CMYK色碼後,網站會立即顯示對比值,以及直接預覽對比值的效果。此外,若該網站可進一步考量弱視或是色盲的族群,增加文字顏色與背景顏色調整的功能則會更加完整。

使用精準清楚的網頁層級 (h1~h6)

多數人閱讀喜歡層級結構整齊、條理分明的網頁,也會使用文字的大小、粗細等方式以表達不同的層級與重要程度,而在網頁設計上,則建議使用HTML中既有的標題標籤來表達網頁中各種層級的概念。

如此一來,除了方便視覺障礙者使用螢幕報讀軟體時能更精準辨別文字層級外,其含有2項明顯優點:一是在網頁設計上使用不同標題標籤,有助於方便css的版面配置設計;二是在搜尋引擎最佳化 (SEO) 上,精準使用標題標籤也能提升搜尋引擎找到資料的可能,以Google公布之《搜尋引擎最佳化入門指南》中就有明確指出標題標籤的使用是自動判斷的標準之一。

另外,提醒在視覺呈現上,偶爾會出現遺漏某一層級的情況(如有使用h1、h3的標題標籤,卻跳過h2),應盡力避免,因為如同我們看到1、1-1-1章節,卻找不到1-1或1-2章節,此狀況對視覺障礙者的使用,以及SEO程式的判斷有巨大影響。

有意義的圖片增加替代文字屬性 (alt)

在網頁設計時,我們可將圖片粗分為有意義跟無意義的圖片(如裝飾性圖片)。

有意義的圖片包含:說明或範例用、點擊有效果產生(如增加選項、超連結等),這類型的圖片建議增加替代文字的屬性 (Alt) ,方便視覺障礙者使用螢幕報讀軟體時能報讀出替代文字,進而讓視覺障礙者獲取圖片的意義與用途。

此外,在搜尋引擎最佳化上,增加替代文字也可以方便搜尋引擎的解析與判斷,增加被搜尋到的機會。

無意義的圖片或輔助性圖片則無須增加替代文字屬性,容易顯得屋上架屋。以下圖為例,該館藏查詢列表頁面中,書籍封面旁邊已提供書名資訊,在書封圖片上則無需額外添加替代文字屬性。

錯誤提示能夠將鍵盤焦點定位到該錯誤處

在網站填寫問卷、申請資料或是登入等功能上,會有需要使用者填寫的畫面。使用此類型功能時,當出現資料驗證錯誤(如遺漏必填、密碼錯誤等),建議除了出現提示框告知外,也能將鍵盤焦點 (Focus) 定位到錯誤的欄位。

此措施對於視覺障礙者有非常大的幫助,能夠大幅減少填寫時間,且對於一般使用者來說,於填寫資料篇幅較長時,亦為貼心的服務。

隨著提供給視覺障礙者使用的螢幕報讀軟體,其發展日益貼近現行常用之網頁技術,無形中減少許多網站開發上需要額外處理的無障礙設計,取而代之的是,能夠同時對視覺障礙使用者、一般使用者與網站本身都有幫助的通用型設計需求,筆者也期待未來能出現越來越多具有親合力的網站讓使用者瀏覽。

參考文獻

  1. 身心障礙者人數按障礙成因及類別分。衛生福利部統計處。民110年7月23日。取自 https://dep.mohw.gov.tw/dos/cp-5224-62359-113.html

  2. 「中華民國人口推估(2020至2070年)」。國家發展委員會。民109年8月。取自 https://pop-proj.ndc.gov.tw/download.aspx?uid=70&pid=70

  3. 無障礙網路空間服務網─關於本平台。國家通訊傳播委員會。民110年7月1日。取自 https://accessibility.ncc.gov.tw/about