首頁 部落格 讓視障者也能輕易瀏覽網頁的五個設計技巧
Ryan
May 21, 2013
讓公司平均年齡上漲的宅男,經營過動漫社團、當過電玩雜誌特約作者。 興趣是電競與科技,關注新趨勢購物,尤其是冷門商品、或尚未上市的群眾募資商品。 網路行銷一做就是十幾年,認為這個業界需要更開放交流,才能成長與突破。

讓視障者也能輕易瀏覽網頁的五個設計技巧

在美國有多達5千3百萬人年齡超過45歲的人,是有視力上的障礙問題,從輕微的到嚴重的都包括在內,但其中有18%的人已經是法定上的全盲。基本上他們也如同你我一樣,每天都需要用到網路,且越來越多超過50歲的人已經能夠自在的使用網路,因此如何讓視障族群可以瀏覽我們的網站,也成為網頁設計師的工作之一。

以下我們列出了許多能夠增加網站可讀性的技巧,如此可以使得網站更容易受到視覺障礙者方便使用:

 

1. 允許使用者調整字體大小

能夠調整字體大小的網站,可以說是大部分網路使用者的基本需求。不過現在使用者更希望,除了控制字體大小不會使圖片與文字出現錯誤的畫面外,更希望可以放大字體後依然不會影響瀏覽的版面,例如增加行數讓移動捲軸的次數變多。

這樣的字體控制服務,可以端看你的網站屬性而定。如果你的網站屬於文字比較多的網站,不妨提供純文字的版本,如此可以讓客戶更為輕易的自己調整自己喜歡的字體大小與關看的方式。

 

2. 對比是個關鍵

有一類視網模病變的族群,他們有個共通的特點,就是對於眼色的對比度的辨識能力變差了,對比是眼睛用來辨識顏色、亮度的差別以及差異大小的機能。

不過今日主流的設計總是以簡潔細膩為主,這對於一般的使用者來說,可以覺得畫面十分的潔淨與俐落,但是對於視覺障礙者來說,這樣的網頁卻不太容易閱讀。

我們建議網頁設計者製作網頁時,可以提供兩種或多種對比的方式供使用者選擇,文字呈現可以使用粗體字體來增加低對比度的閱讀部份。請注意千萬不要使用CSS或是Javascript來限制使用者使用游標反白的方式選取文字,許多視障者都依賴著這個功能來閱讀吃力的文字,若是加以限制對他們來說是十分不便的。

 

3. 留意顏色與互動的功能鍵

色盲是一個十分常見的視覺障礙,大約8%的男性以及0.5%的女性會有這樣的問題,他們對於顏色的分辨能力出了錯誤,因此無法於需要辨識顏色的場合中正確的執行動作,例如開車。因此網站設計時,應需考慮到色盲者的需求。

對於色盲者來說,組合式的色彩對他們會有分辨上的障礙,例如紅色按鈕的取消搭配上綠色按鈕的同意,這樣的組合對於正常人來說簡易不過,但是對於色盲者來說卻是十分吃力的選擇。因此我們設計時可以考慮,將「確定」與「取消」的其中一個按鈕的顏色,改用純文字的方式來呈現,如此就可以減少因為顏色對比所引起的視覺上的誤會。

 

4. 使用桌上電腦觀看你的行動網站

如果您的網站提供了專為行動裝置設計的行動瀏覽網頁,那麼您可以試試看請視障人士來觀看這裡的網站內容。一般來說行動瀏覽頁面大多設計用於手持式裝置或是平板電腦,因此字體以及各項的設計都是以易於閱讀為前提,這正是視障者所需要的網站。

雖然行動網站的各項設計都十分的利於視障人士閱讀,但請特別留意這類網站也大量使用了AJAX或Javascript技術製作,這對於視障者又是不利的因素,必須特別留意。

 

5. 用熱鍵加強網頁瀏覽

大部分的視障者都使用的是大畫面的電腦螢幕,例如22吋或24吋電腦螢幕,然而這樣的尺寸與解析度下滑鼠游標經常會不易被找尋到,造成了視障者瀏覽的困擾。為了減少這樣的問題,我們建議設計視障網站的時候,不妨多多利用鍵盤的熱鍵控制網頁的閱讀或是功能,減少視障者使用滑鼠,找尋滑鼠游標的時間與力氣。

 

原始文章:http://mashable.com/2011/04/20/design-for-visually-impaired/

(使用圖片來源:PIXABAY 作者 Paulbr75 iWare網頁設計公司網站翻譯)
 

超好玩nVidia AI樂園,美圖、P圖、去背全自動完成
超好玩nVidia AI樂園,美圖、P圖、去背全自動完成
Free Resource
Free Resource
Apr 08, 2019
Google協作平台製作網站的優缺點分析
Google協作平台製作網站的優缺點分析
Free Resource
Free Resource
May 07, 2019
淺談無障礙網頁設計2.0
淺談無障礙網頁設計2.0
Ryan
Ryan
Jan 11, 2019