Salesforce的無障礙設計顧問Cathy O’Connor 曾表示，全球殘障人士的數量並不少，具體數據如下：
○ 全球15%的人口有着不同程度的殘疾，包括視力、聽覺、行動及認知障礙。
○ 全球約4%的人口視力低下，0.6%的人口有視盲，這些用戶可能需要藉助屏幕閱讀器/盲文閱讀器的幫助。
○ 全球約7-12%的男性以及不足1%的女性有不同形式的色覺缺陷(如色盲)，他們難以區分某些特定顏色組合。
○ 低視力狀況隨着年齡的增長而增加，50歲以上的一般人有一定程度的低視力狀況。
○ 全球增長最快的人群是60歲以上的人。
○ 過了40歲，大多數人都需要戴老花鏡才能看清小物體或文字。
……
此外，現實生活中，不乏部分用戶仍在使用老舊、性能差的設備/熒屏;也有部分用戶是需要在強烈陽光下、在交通工具上，以及在昏暗的環境中使用你的產品。
因此，為了讓使用條件不是很好的用戶可以正常使用你的產品，也為了更多有視覺障礙的用戶能用好你的產品，將「無障礙設計」的概念融入到網頁設計中，是一件非常有必要的事情!
推薦閱讀：
網頁設計新手指南：如何「無障礙」融入到網頁設計中?
一、網頁設計需符合WCAG規範
WCAG全稱為Web Content Accessibility Guideline，中文翻譯為Web內容無障礙指南，主要針對殘障人士包括視力、聽力、運動和智力等制定諸多方面的標準條例，確保殘障人士能夠訪問並使用Web內容。此外，WCAG還可為其他用戶帶來好處，比如部分用戶可能因為瀏覽技術、網絡速度或瀏覽環境等不良情況，而遭遇與與殘障人士類似的障礙。
因此，網站若遵循WCAG規範來設計，必然有助於提升整體用戶體驗。而該規範主要提出以下四大原則：
▶ Perceivable(可感知)：介面組件和信息必須以用戶可以感知的方式呈現
▶ Operable(可操作)：介面組件和導航必須能保證用戶可操作交互
▶ Understandable(可理解)：確保用戶能夠理解介面的信息及操作
▶ Robust(穩定耐用)：內容必須具有足夠強的適應性，可以兼容包括輔助技術在內的各種用戶工具，即使網絡技術進步或用戶工具升級，內容都可以保持一定的可訪問性
二、如何保證網站符合WCAG規範?
1.讓用戶「聽」懂介面信息
對視障用戶來說，讀屏軟件就像他們了解互聯網世界的眼睛，可以透過聽取讀屏語音來了解介面上的信息。如果網站設計沒有設置無障礙讀屏功能，視障用戶將無法獲取介面信息，自然無法正常使用你的網站。
如何為網站設置無障礙讀屏功能?
● 在網站代碼中添加無障礙標籤，如Android :contentDescription;iOS:accessibilityLabel
● 裝飾性icon可隱藏標籤不讀來提升讀屏效率，但不建議不做處理或不加標籤，否則用戶可能以為這裏含有什麼重要信息但無法讀取而感到不安。
● 標籤語義盡量精準簡短，盡可能使用動詞
● 必要時需要走查焦點順序，確保用戶不會被錯誤的焦點順序誤導頁面含義
● 盡量保證頁面圖形能被準確讀出其用途，如search icon應避免被讀成「magnifier」或「searchBtn_123」
2.提升網站的色彩對比效果
眾所周知，色彩既可以幫助用戶區分信息數據的類別和維度，也可以幫助介面傳達情緒等重要信息。然而，世界上卻有不少因色覺障礙(色盲)問題而大受困擾，因此為了保證這類人群可以正常使用網站，應盡可能提升網站的色彩對比效果，以保證網站信息擁有足夠高的辨識度和舒適度。
以下兩種方法可以提高網站信息的辨識度和舒適度：
● 使用更安全的配色方案
關於網站配色方案，應盡量避免選用明度相似的橙、黃、綠兩兩配色和明度相似的紅、綠配色，因為這會造成色盲用戶的可讀性問題。對於紅綠色盲人群而言，紅色並非一種明亮醒目的顏色，同時在他們眼中紅色越深越接近黑色，因此他們難以分辨內容中的深紅色文字，從而遺漏界面中的關鍵信息。
此外，臨床醫學研究證實，高飽和度高對比的顏色，甚至只是黃色，都有可能令自閉症患者感到不安和不適;而老年群體隨着年齡增長，眼球晶狀體會逐漸變黃變混濁而選擇性的吸收藍光，從而導致他們對藍色的鑒別能力下降明顯，如果你的網站目標用戶是老年用戶，應盡量避免藍色運用到重要按鈕中。
● 合理使用其他視覺變量
雖然顏色是數據可視化中最常用的視覺變量之一，但是對於無法辨別顏色的用戶來說，介面僅用顏色作為唯一的提示信息，他們可能無法理解網站想要傳達的信息。因此，除了為網站制定合理的配色方案外，我們還可以適當運用圖標、紋理或文字等其他視覺變量，對介面的重要信息和元素加以標註。
3.保證控件的大小和間距合理
什麼是控件?控件是指在UI設計中，用戶可以與之進行交互以輸入或操作數據的對象，這包括按鈕、鏈接、輸入框等可操作的UI元素。
一般來說，控件的尺寸太小或間距太近，都可能導致用戶因誤點擊而感受到挫敗感，比如無法用指尖精準定位的用戶、因年齡而導致靈活性降低的老年用戶等，都會難以點擊過小或過近的空間。因此，保證控件足夠大、足夠遠，有助於方便用戶識別並減少誤觸的可能性。
4.確保網站內容的易讀性
正常情況下，大部分用戶難以辨別過細、過小、斜體和全大寫的文本內容，更何況是有視力障礙的用戶。在設計無障礙網站時，我們不僅保證字號足夠大以加強介面易讀性，還應該允許用戶自定義設置字體、字號、行高或字間距等，並確保設計在大字號情況下不會出現內容溢出或排版錯亂的情況，從而達到舒適的閱讀水平。
除了允許用戶自定義設置文字屬性外，增加文本顏色和背景色的對比度同樣與介面易讀性和可讀性息息相關。目前WCAG AA對文本對比的規範為4.5：1，不過如果介面文本足夠大，該標準可適當將至3：1。
關於介面可讀性的問題，還有一點需要注意的是：盡量不要在圖片上疊加文字，除非你可以保證圖片背景單一且對比度足夠高，或者我們可以為文字添加一層單單的遮罩以確保它的可讀性，但要注意避免使用極高對比度的文本，否則部分視障用戶會看到文字旋轉或模糊的情況。
5.避免濫用的動效設計
適當添加動效設計的確可以給網站帶來生命力，但是濫用動效不僅會分散用戶的注意力，嚴重可能對部分用戶(如光敏性癲癇患者)造成生命威脅。此外，WCAG官方說明也提及到，部分用戶會因為滾動頁面的動效而觸發大腦前庭疾病，產生頭暈症狀。
為了避免給特殊人群造成困擾，網站若出現以下情況，建議給用戶提供相關的控件或選項來暫停、隱藏或更改動畫效果及頻率：
● 動效每秒的閃動超過3秒
● 發生閃光區域超過熒屏的25%
● 介面出現過於誇張的視差和運動效果
● 介面出現多個元素不斷移動、閃爍
總的來說，無障礙設計並不是隨便增加元素屬性的對比效果就能達成，更多是需要我們不斷嘗試、不斷研究，才能讓網站變得更友好，讓更多不同用戶都可以平等地使用我們的網站!
香港網頁提供一站式數碼營商方案服務，包括、網頁設計、網絡推廣、網頁管理與寄存、系統開發及其它增值服務，全方位滿足客戶的業務需要，歡迎隨時聯絡我們，香港網頁是您開拓網路商機的最佳伙伴。
聯絡電話: 37499734 電郵地址: [email protected] 網址: www.hkweb.com.hk
