Accessibility Cover

我的視覺化,盲人看得到嗎?雖然資料視覺化本質上就是要用「看」的,但我們其實也可以讓他用「聽」的、「讀」的或「摸」的!這次讓我們一起來探討無障礙使用體驗與資料視覺化的議題。

如果你常逛政府的網站,也許你會看到一個類似這樣的小圖掛在網站的角落:

Accessibility Badge

這代表該網站已通過國家檢測,符合 A+ 等級的無障礙標章。什麼是無障礙?簡單的說,讓網站的不同使用族群都能夠使用該網站。想像一位紅綠色盲的朋友依網頁指示要操作網站介面,卻發現其中一個指示要求他點擊綠色的按鈕 — 只好靠猜測了! ( 幸好在駭客任務中,莫菲斯要尼歐選擇藥丸時,尼歐不是色盲! )

pills

from Wikipedia by W.carter CC BY-SA 4.0

考慮到網站的使用族群各有不同,行政院研考會參考 W3C 的 WAI 標準制定了「無障礙網頁開發規範」,目前並由國家通訊傳播委員會 ( NCC ) 核發無障礙標章,推行至今也已經十餘個年頭了。

那麼,你可能會想,視覺化就是要用看的,盲人怎麼有辦法看到?

看不到的視覺化

當我們在網頁上呈現視覺化的時候有相當多的做法;利用 CSS 排版、使用 Canvas 繪圖、或是運用 SVG 、 X3D 等向量描述語言來繪製圖形。看起來似乎只能用看的,但事實上網頁資料視覺化與一般網站製作的差異並不大;網站會用影像、會排版文字、會使用不同顏色或是利用滑鼠的互動效果。

相對的,若一般網頁的使用者介面設計可以做到無障礙,互動式資料視覺化也可以利用類似的原理來製作。政府的「無障礙網頁開發規範」有數十項的檢測碼,很多涉及到網頁設計的細部規則;在製作資料視覺化作品時不一定都適用,但我們還是可以歸納出一些可以注意的重點,條列如下:

注意所配色對比是否足夠,並考慮色盲用戶。

前後景的顏色對比不足時,文字讀起來其實相當吃力。所以,挑選顏色時務必要確認顏色在使用時是否會造成對比不足的情況。此外,色盲用戶有些無法分辨紅綠、有些無法分辨藍黃,或甚至只能靠明度來判斷差異,因此這一點也必須特別注意。

另外一種替代顏色的方式是使用花紋;格線、格點或重覆的圈叉樣式雖然會造成振顛讓人眼花撩亂,但在印刷時卻有機會產生不同紋路讓盲人可以以「觸摸」代替「看」。這時,文字也可直接利用 Braille 字型 ( 盲文 / 點字 ),讓盲人也可以閱讀。

關於顏色我們在先前的專文中也有談到,有興去可以去瞧瞧這篇文章:「六個訣竅,改進你的視覺化作品

考慮 Script 與 CSS 無法運作的情況

現今的網頁排版大多透過 CSS 與 JavaScript 在運作,但未必所有的人都能夠透過具 CSS 與 JavaScript 能力的程式來瀏覽網頁。當程式無法運作,有些視覺化失效時,如果我們還是能在網頁中提供最基本的資料,那就再好不過了。

browser not support

圖片、影片與聲音檔要提供替代方案

視障者無法閱讀圖片、聽障者無法聽到聲音,我們可以透過 HTML 的「alt」、「title」屬性讓圖片也能被閱讀;影片的字幕與替代文字也相當有幫助。這邊要特別注意,就是若有任何裝飾性的圖片,我們要利用空白的 alt 讓它被程式忽略。千萬不要有類似這樣的圖片說明出現:

  <img src="dot.gif" alt="我只是一個分隔用的點"/>

滑鼠動作要有替代的鍵盤動作選項

若我們需要讀者做一連串的滑鼠點擊來觀看整個視覺化作品,那最好的方式就是一併提供「下一步」的鍵盤對應鍵 ( 利如 Tab 或是 → 方向鍵 ) 。這不一定容易做,尤其在有大量資料、是一個探索式的視覺化呈現時。這時我們可以提供搜尋索引的功能,或是利用像紐約時報「A 3-D View of a Chart That Predicts The Economic Future: The Yield Curve」 這篇報導,以圖文分段的方式做一個整體描述。

nytimes 3D Lines of Yield Curve

紐時的報導利用不同角度投射同一個視覺呈現來搭配報導敘事

發出聲音時要有視覺線索

偶而我們會利用聲音來提醒使用者應該要進行不同的動作,比方說:微波完成時「叮」的一聲。不過,如果只有聲音卻沒有其它任何提示,聽障者便會錯過這項訊息而不知所措。一個搭配的視覺提示會很棒的輔助我們的聲音線索,讓聽障者也不會錯過重要訊息。

常用的功能與表單元件應提供快捷鍵

有時我們會在視覺化中提供輸入資料的功能讓讀者參與互動。當我們無法用滑鼠點到表單的輸入框時,我們還可以試著用「Tab」鍵在輸入框之間做鍵盤焦點的切換,然而若輸入框沒有妥善安排,該有的提示資訊沒有、切換的順序不明、或是物件太多使得切換困難,那對無法使用滑鼠的人來說都是相當不方便的。

我們可以利用 HTML 的 tabIndex 與 accesskey 屬性指定 Tab 跳轉的順序以及快速跳轉的快捷鍵。適當的在輸入框前加上<label> 標籤也可以大大提升表單的可用性。

form

表單有恰當的說明嗎?有設定快捷鍵嗎? Tab 順序指定好了嗎?

在 SVG 中提供輔助說明

雖然 SVG 是向量繪圖語言,我們還是可以加入文字描述。將可以用文字描述的物件以 <g> 群組標籤包覆,並在裡頭加上描述性的文字:

  <g id="taiwan-bar">
    <rect x="10" y="10" width="20" height="100"/>
    <title>台灣: 100 元</title>
    <desc>台灣去年賺了 100 元</desc>
  </g>

對 SVG 的 Accessibility 有興趣的朋友可以參閱 W3C 所提供的「Accessibility Features of SVG」文件。

為 Canvas 提供替代資訊

Canvas 不像 SVG 是結構化的描述語法,他是以程式描繪的一張點陣圖。然而,我們仍然可以在 Canvas 下隱藏一段由同一支程式所產生的動態 HTML,用條列或敘述的方式來說明 Canvas 中所產生的文字。

shadow-dom

將圖與文相疊合,使用 Reader 時將會唸出底下的文字。 div 中的 di 為 id 的誤植,感謝網友提醒。

可用性,不光是可以用

談了這麼多,相信你對「Accessibility」與資料視覺化更了解了一些,但我希望能引導大家去做的不是背誦這樣條列式的規則,而是去活用並思考這些議題。比方說,即便考慮到了色盲問題,不同顏色有所謂「前進色」、「後退色」、也有顏色的重量;當一張圖表中使用了較亮的顏色,他很有可能就會讓人感覺該色塊的面積比較大。圖表過於複雜的時候,無論是用語音或視覺都沒有辦法有效傳達資訊,這時光是具有「可用性」也是沒有用的。

另外,作品的目標族群也是值得考慮的一點。Chrome Experiment 網站 有需要去考慮 Internet Explorer 6.0 使用者能否正常讀取嗎?我想是不用,頂多跳出「點此安裝最新版 Chrome 」的提示吧!

總而言之,看完此篇以後,下次製作視覺化專題時,別忘了多考慮一下可用性的問題喔 🙂


Written by infographics.tw

2 Comments

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *