K 一覺醒來,突然發現自己看不到了。
雖然緊急動了手術之後搶救回部分視力,但是仍然沒有辦法回到原本的狀態。
「你看過那種幾十年前的相機拍出來的畫質嗎?如果說一般的視力是現在最新推出的HD高畫質相機,我的就是那種超級古董機,而且鏡頭還進了水。」他這樣跟我們形容。
像K的情況並不罕見。
在台灣70歲以上高達九成,日本80歲以上的人百分之百會得的白內障,患者會因為老化視野變得模糊。青光眼也是在各國造成失明的主要原因之一。另外還有黃斑部病變等,不論是因為身體機能老化或是其他原因,視力的低下或是喪失都是常見也不可避免的問題。
低視能的症狀也各不相同,除了常見的視野模糊之外,視野中央的喪失、視野周圍視力的消失、視野的歪斜、反應速度變慢、畏光與對光敏感⋯⋯像下圖是W3C用模擬器模擬的低視能可能會有的狀態。

低視能使用者常見會用到兩種輔助型科技:放大功能與顏色對比調整。
放大功能常見有兩個種類:一個是內建於電腦系統裡的放大鏡功能,另外也有在網頁瀏覽器設定中可以調整的放大功能。使用者可以透過把螢幕放大大約兩倍至五倍來操作電腦。
下圖展示使用 microsoft官方支援頁面 介紹放大鏡功能的使用者使用畫面:
下圖展示同一個網頁頁面在一般設定下的大小(100%)跟放大三倍之後的樣子。
另外,也有使用者會透過把顏色調整成反轉顏色、整體的對比度調高、調整螢幕明暗程度來操作。以反轉顏色為例,有些低視能使用者對於光較為敏感,所以會需要調整成反轉顏色。雖然現在手機都有對應dark mode,但是並不是所有網頁或產品都有對應dark mode,有些即便在開啟dark mode的狀態下依然會顯示白底黑字的設計,因此使用這個功能能確保光線能夠維持在一定的明度之下。
下圖展示iphone的內建功能把顏色調整成對比顏色,以及開啟高對比度模式之後的差異。
放大功能等其實並不只適用於低視能使用者,尤其現代人(像我)因為長期盯著螢幕,視力低下與深度近視其實也並不罕見,更別提剛剛提到基本上隨著身體機能老化一定會出現的眼睛退化問題(老花,白內障等),也因此有非常廣泛的使用者族群能夠受惠於為低視能的輔助型科技。
例如高齡使用者在選購手機時會優先選擇大螢幕尺寸,也會把系統字體放大,或是透過手勢等將整體螢幕擴大等。而我自己作為高度近視族群,即便戴眼鏡有時候也無法在健康的距離觀看螢幕。這時候我其實很常使用 MAC系統內建的縮放功能 來縮放螢幕觀看內容。
這時不知道你會不會心想,「放大之後只是整個螢幕變大,好像也跟原本的網頁沒有區別呀?做產品的時候有需要特別注意什麼嗎?」
下面以設計師比較常會碰到的網頁做主要例子:
舉例來說,問題可能會出現在使用網頁放大之後畫面呈現的問題,例如閱讀的動線沒有設計清楚、layout跑掉導致無法正常瀏覽或互動,或是有些需要高度互動,例如hover,拖移等動作時會因為移動空間受限而無法正常完成,以下舉一些常見例子。
常見問題點1:閱讀的動線需要持續上下左右滑動來瀏覽
由於很多網站並沒有設定放大之後該如何呈現,使用放大工具將畫面放大之後,其實就會直接把整個網頁放大。
這樣的操作模式因為需要同時使用上下左右滑動來閱覽網頁,對於低視能使用者來說閱讀的難度便會增加,也因為一般瀏覽網頁的使用習慣為上下捲動閱覽,因而時常會遺漏在右邊的內容。
常見問題點2:放大之後固定內容擋住整體頁面無法操作
以下圖電商平台為例,在點選商品圖片放大之後會出現dialog,但是因為整體大小固定之後,原本用以關閉視窗的icon無法點擊,因而無法從這個dialog中離開。(有些產品可以透過鍵盤的esc鍵跳出)
常見問題點3:放大之後無法正常使用功能
以下圖電商平台為例,原本導覽列存在的功能icon在放大之後無法全部顯示完全,然而因為標題列的位置固定,無法左右滑動因而無法正常瀏覽使用。
常見問題點4:顏色對比度不夠
雖然剛剛提到有關於加深對比度的系統輔具,但是作為設計師仍然必須思考在不仰賴輔具的情況下,如何盡量讓更多人看得清楚資訊。顏色對比度在這之中就是關鍵角色,也應該是設計師們在日常最會接觸到的無障礙議題,但是並不是所有網站都有達到對比度的標準。
常見不會達到對比度標準的地方例如:
- LOGO的標準色:因為公司標準色就是未達到對比度標準的顏色
- 次要重要度的要素:隨著視覺層級的往下,顏色變得越淺
- disabled狀態:因為是無法操作對象,所以顏色變得十分淺
- 注重色相搭配的設計:因為只注意到顏色不同的變化,而忽略不同顏色之間的明度之間差別不夠。
關於對比度更詳盡的說明,之後會在介紹顏色與對比度的主題中更詳盡的介紹!
看到這裡,希望你對低視能使用者與操作模式有一個基礎的認識。
之後我們也會持續推出針對放大,顏色對比度的設計相關的討論文章,如果有興趣的話歡迎追蹤我們唷!👋






