無障礙網頁設計原則

這篇文章在講什麼?

無障礙網頁設計是一種讓所有人都能夠輕鬆地使用網頁的設計方法,涵蓋了視覺、聽覺、肢體、認知和語言等方面的考量,並且遵循了一些國際標準和原則,例如 Web Content Accessibility Guidelines (WCAG) 2.11,也考慮到使用不同設備和瀏覽器的人,以及不同語言和文化背景的人。

目的是讓網頁內容和功能對所有人都是可感知、可操作、可理解和可適應的。

導入無障礙網頁的好處

導入無障礙網頁設計對於網站經營者有許多好處,例如:
  • 增加網站的使用者數量和滿意度,因為無障礙網頁設計能夠滿足更多不同需求和偏好的使用者。
  • 提高網站的品牌形象和社會責任,因為無障礙網頁設計能夠展現對使用者的尊重和關懷,以及對社會多元性和包容性的支持。
  • 優化網站的搜尋引擎排名和流量,因為無障礙網頁設計能夠提供更多的語意資訊和結構化資料,讓搜尋引擎更容易理解和索引網站內容。
  • 符合當地無障礙法規,許多國家和地區都有相關的法律或政策來規範公共網站的無障礙設計,以保障身心障礙者的權益和平等機會
    • 在台灣,身心障礙者權益保障法第二十八條規定,「公共部門及公共場所之資訊設備及其相關服務,應提供身心障礙者無障礙之使用方式」。另外,數位發展部也制定了無障礙網頁開發規範,並推動政府網站無障礙標章檢測,以提升政府網站的無障礙品質。
    • 在美國,美國殘障法案(Americans with Disabilities Act, ADA)第三章規定,「公共場所及商業設施不得歧視殘障人士」。這一章也適用於網站,因為網站被認為是一種公共場所或商業設施。因此,美國政府和私人企業都必須遵守無障礙網頁內容指南(Web Content Accessibility Guidelines, WCAG),以確保網站對殘障人士是可感知、可操作、可理解和可適應的。
    • 在歐盟,歐盟無障礙法案(European Accessibility Act, EAA)於2019年6月正式通過,要求歐盟成員國在2025年6月前將其轉化為國內法。該法案規定了一系列的無障礙要求,涵蓋了數位產品和服務,包括電腦、智慧手機、操作系統、網站、移動應用程式等。該法案也參考了WCAG 2.1作為無障礙網頁設計的基準。

常見的無障礙設計的原則

以下是一些常見的無障礙設計的舉例,以及它們如何改善使用者的體驗:

文字和背景的對比度

文字和背景的顏色應該有足夠的對比度,讓視力弱或色盲的使用者能夠清楚地閱讀文字。對比度可以用一個數值來表示,稱為對比比率(contrast ratio)。WCAG 2.1 要求普通文字至少要有 4.5:1 的對比比率,而大型文字至少要有 3:1 的對比比率2。範例

有一些工具可以幫助我們測試對比比率,例如 UserWay 無障礙檢測器。

文字可閱讀性

文字的大小、字型、間距和排版都會影響使用者閱讀的容易程度。文字應該有足夠的大小,讓使用者不需要放大就能看清楚。字型應該是清晰且易於辨識的,避免使用花俏或難以區分的字型。間距應該是適當且一致的,讓使用者能夠順暢地追蹤文字。排版應該是符合語言和文化習慣的,例如考慮文字方向、對齊方式、換行規則等等。

鍵盤可操作性

網頁應該能夠讓使用者只用鍵盤就能操作所有的元素和功能,而不需要用滑鼠或觸控螢幕。這對於肢體或精細動作受限的使用者很重要,因為他們可能無法準確地控制滑鼠或觸控螢幕。通常使用者可以用 Tab 鍵在按鈕和連結之間跳轉,並用 Enter 鍵來觸發它們。網頁應該提供一個清楚的焦點標示,讓使用者知道目前在哪個元素上。網頁也應該提供一個跳過導覽列的選項,讓使用者可以直接進入主要內容,而不需要按很多次 Tab 鍵。

表單可用性

表單是網頁上常見的一種元素,用於收集使用者的資訊和回饋。表單應該能夠讓使用者清楚地知道要填寫什麼資訊,以及如何填寫。表單的每個欄位都應該有一個明確且相關的標籤,讓使用者和螢幕閱讀器都能理解欄位的意義。表單也應該提供一些提示或範例,讓使用者知道要如何輸入正確的格式。如果使用者輸入了錯誤或不完整的資訊,表單應該提供一些清楚且有用的回饋,讓使用者知道要如何修改。

色彩和對比度

站就有一個無障礙的表單範例。 色彩和對比度:色彩和對比度是影響視力弱或色盲的使用者閱讀和辨識的重要因素。無障礙設計應該選擇有足夠對比度的色彩組合,並避免使用可能引起混淆的顏色,例如紅綠色。無障礙設計也應該提供一個切換色彩模式的選項,讓使用者可以根據自己的偏好或需求調整色彩。

影音和字幕

影音和字幕是影響聽覺和理解的重要因素。無障礙設計應該為所有的影音內容提供清晰且同步的字幕或旁白,讓聽力弱或聾人的使用者能夠理解影音內容。無障礙設計也應該提供一個控制音量和播放速度的選項,讓使用者可以根據自己的需求調整音量和播放速度。

好用的無障礙設計檢測工具

要檢測一個網站是否符合無障礙網頁設計的標準,有許多好用的工具可以幫助我們,例如:
這是一個免費的線上工具,可以快速地分析網站是否遵循 Web Content Accessibility Guidelines (WCAG) 2.1 的 A 和 AA 級別。它會生成一個詳細的報告,列出所有發現的問題和建議的改進方法。

AccessiBe

基本上和Userway其實很類似。不過主打是以AI的基底來檢測和套用無障礙設計

結語

我一向覺得,企業在製作網站的過程中,若能同時考量那些相對的少數,讓大家都在盡可能處於同一個門檻,才更能引起良善的循環啊,利他也利己。

免費下載
目標消費者範本

用20個問題,輕鬆瞄準你的目標消費者,不再亂槍打鳥

作者

其他相似的文章

2025易用性測試的方法和案例,一篇搞定

易用性測試(usability test) 能讓你用最少成本評估一個網站/APP好不好用。觀察使用者操作時,是否能夠順暢、直覺、有效率且感到滿意。藉此抓出出乎意料的操作問題,進一步提升網站/APP的使用者體驗,本篇文章讓你一次搞定所有實務細節和範例問題

取得最新趨勢應用分享

每週分享多元學習內容,包含:用戶體驗設計技巧、應用案例解析、國內外業界趨勢、技術、設計技能培養