2016年12月11日

[網頁設計] 有助於色盲使用者的友善體驗 (1)設計構思

A+
color-blink-web-design-1-[網頁設計] 有助於色盲使用者的友善體驗 (1)設計構思前陣子有讀者在「Blogger 文章標題最佳化」留言表示:"建議WFU大,文章的字顏色對比可以強一點,或標個線?這樣對色弱色盲人土比較友善,我完全找不到紅字在哪"。這才發現過去接觸網頁設計的主題時,很少碰到這一塊,因此沒想過要研究這部分的設計。

經查詢資料後,發現色盲、色弱者的比例,比想像中還多不少,站在 "營造友善的使用體驗" 這樣的立場,的確應該改善網頁設計,讓這個族群閱讀文章時沒有障礙。

本篇會大致列出協助色盲使用者的網頁設計要點,同時也提出個人的設計構想。

(圖片出處: commons.wikimedia.org)


一、色盲比例


根據維基百科「色盲」的介紹頁面,色盲的程度與分類遠比想像還多,有最常見的紅綠色盲(例如臉書創辦人 Mark Zuckerberg)、藍黃色盲、以及(紅、藍、綠)色弱等。

色盲通常發生在男性,而女性的比例很低,把維基百科頁面各種色盲、色弱的男女比例相加,再除以二後,得到的比例大約是全部人口的 8% 左右,這個數量不可謂不小。


browser-visitor-ratio-[網頁設計] 有助於色盲使用者的友善體驗 (1)設計構思

上圖是今日拜訪本站的訪客,所使用的瀏覽器比例。色盲使用者的人數超越了 Safari、IE 使用者,達到第 3 高的族群。雖然只是小樣本,不過這樣的訪客比例,是否該得到我們的重視呢?



二、友善的網頁設計要點


這篇「為色盲用戶提升網頁可用性的實用設計技巧」整理了不少值得參考的設計要點,將有助於色盲使用者閱覽網頁:

1. 圖片中使用文字時,需要增加對比,讓文字更容易閱讀,例如文字使用陰影。

2. 頁面標示顏色時,最好加註顏色的名稱,因為色盲者可能無法辨識。

3. 有圖片的產品描述,最好加上顏色標示。

4. 網頁的連結最好加上底線 → 這一點很重要,我們的網頁常常為了美觀,將連結的底線去除。雖然我們可以看出連結的文字顏色與一般文字不同,但無論使用何種顏色,都可能讓一部份的色盲、色弱者分辨不出來,因此最好的方法,就是為連結加上底線。

5. 網頁配色:這一點 WFU 不是專家,請直接參考原文來瞭解如何做。

6. 某些用顏色來強調的文字或說明,必須設計出一套機制,讓色盲使用者能理解。



三、是否需要做出妥協?


不可諱言的,部分針對色盲、色弱者的網頁設計,可能會讓頁面看起來不美觀;同時,網頁的配色是很主觀的,如果為了特殊族群而必須改變站長自己喜歡的色系,這也會很難割捨。

那麼對於這樣的網頁設計,有沒有辦法取得折衷點呢?我想這會是更需要思考的一件事。

想了很久,覺得用以下兩個例子來解釋,其實還滿貼切的。

1. 素食者

例如喜宴、聚會的場合,幾乎都有少數素食的賓客與會,當然不會為了顧全大局叫素食者吃葷、或是大家一起吃素。

處理的方法很簡單,將素食者湊成 1~2 桌供餐,或是不足一桌的話,請餐廳個別幫忙上素食套餐即可。


2. 同志

還有最近關注度很高的同性戀婚姻修法問題,根據維基百科「同性戀」的介紹頁面,同志的比例大約是 5%~10%,與色盲佔總人口比例相當。

由於現行的法律制度,無法保障或解決同性戀者結婚後,對於財產、醫療、能否收養等等的問題。那麼最不影響多數人、最節省社會成本的方式,就是針對同性戀者結婚後,會產生的問題,另外制訂相關的法律來解決。

有寫過程式的話應該就能理解,一個架構龐大的程式、或是別人寫好的程式,已經運作很長一段時間後,忽然想要針對其中多處(例如 5~10 處)進行修改,可能沒幾個工程師願意這麼做,因為改了之後會產生的 bug 可能修都修不完,也不知道何時會再冒出來。以工程師的立場可能寧願打掉重寫,或是主體不動、另外寫個補丁來達到修改的目的



四、本站的設計規劃


因此我認為兩全其美的設計方式,就是針對不同的族群,規劃不同的功能或版面,就像是另外寫個小補丁的作法。

例如有的站長看網頁不需要大字,因此網頁的字體設定得很小;但對於某些族群,例如銀髮族、眼力比較差的讀者,就很需要看到大字。那麼最簡單的方法,就是參考「讓訪客能自行放大網頁文字,提升友善閱讀體驗」,在網頁提供可放大、縮小字體的按鈕,讓不同族群各取所需

同樣的,為色盲、色弱的使用者,另外規劃一套版面 CSS 出來,在網頁明顯處提供按鈕來切換,就能解決這個問題了。

根據「二、友善的網頁設計要點」,本站的設計方針大致有:

  • 原本文章區塊為黃底黑字,另一套 CSS 將會使用白底黑字,用來增加對比。
  • 原本文章區塊的連結無底線,另一套 CSS 將會使用底線。
  • 本站文章常用紅字標示重點,同時教學程式碼中包含了大量的紅、藍、綠字串,為了幫助辨識,另一套 CSS 會將常用顏色特別標示出來。

原理說明完畢後,下一篇會進行實作,並附上本站使用的程式碼範例,供讀者設計上的參考。



更多使用者體驗相關文章:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。