首先我們先來看一篇文章，
這篇文章是從我在第一日裡提到的 Smashing Magazine 的一篇無障礙 Guideline 看到的，
裡面提到了一篇 Sara Soueidan 的案例研究：

• svg 是我們最常用來呈現視覺化圖表的好方式，但螢幕閱讀器難以報讀，因為圖形很難用語意表達。
• 即便使用 aria 技術在標籤中補上，效果仍舊很差。
• <svg> 內容直接放在 html 裡沒特別注意的話，很可能會造成 id 重複等問題。
• 最好提供純文字描述和表格（大叔覺得這是最後備案，因為程式要寫成可以解讀數字並轉化成有語意的句子相當困難）
• 因為描述可能會很長，<iframe>不好、<figure>是靜態，所以選擇 <object> 來使用。
• 使用 <object> 時，需補上 aria-label 與 aria-describedby

大叔在網路上使用 codepen 測試了一下，使用 macOS 的旁白，的確會唸出 label 以及 long description，svg 的部分則會以 #document 的方式顯示。

這是一個案例，現在，我們來看看 Highchart 如何做：
很顯然的他是使用了 iframe 的方式，而且很辛苦的在 svg 裡的各種圖形加上各種 aria 補充資訊，使得使用者可以使用鍵盤在圖表內進行移動與取得資訊，並且可以篩選資料。而最後還有一段長描述，如果不操作圖表的話，看長描述內容也可以輕易得知，另外還有做 RWD ，可謂下了足夠的功夫，下的功夫直接解決 Sara Soueidan 的煩惱。（但也許 Sara Soueidan 不喜歡 iframe 的方式，誰知道呢？）

從以上兩個案例技術面來看，基本要掌握的重點就是提供文字以及聲音的描述，
其他就是看本身資源夠不夠做到補充更多資訊和互動時的提示。

對於視覺面，最重要的就是避免只使用顏色辨識的方式。
就如同無障礙網頁設計要注意色盲、色弱等情況，
圖表在網頁裡，理所當然也要注意，
所以就會有一些方法來讓有這些情況的使用者可以辨識：為背景加上不同圖案或線條不一樣形式表現等，例如群組長條圖原本只有顏色，可以在每組代表相同意義的 bar，畫上可以區分的圖樣特徵，例如斜線、原點等方式。
範例在剛剛的 Hightchart 裡也有。

我們把 Hightchart 裡面的頁籤都來看過一遍：

• 鍵盤導航
• 螢幕報讀
• 視覺
• 聲音與影片
• 觸覺，可以使用特殊印表機，印出可以摸點字的機器
• 聲化，直接將資料以音樂樂階播放
• 各種提示，例如懸浮資訊、圖例、標籤等
• 多國語言

哇，列出來才知道要做一個好的無障礙網頁設計的圖表這麼多要注意，實在是學習了！！

另外在 How we make sure our charts, maps and tables are accessible 這一篇文當中，還有提到了以下注意的事項讓使用者可以下載資料，也許可以讓他們以其他熟悉的方式進行閱讀。

到這邊大致上大家應該都可以理解最重要的事情是什麼了，
如果還有興趣，Dataviz 這個網站也蠻值得一看，裡面有幾個範例與製作時的思考過程可以參考一下。

大叔非常希望這篇可以讓更多人看到，
因為現在資訊、資料視覺化因為資料處理的量龐大，
有很多東西會變成做成圖表有助於理解內容，
尤其政府部門的資訊近年來都會做 Dashboard，
那能不能把政府的圖表資訊有效傳達到每個人就是很重要的公平正義之事，
所以即便你的網站不過無障礙標章，那至少圖表也做一下吧！

這篇雖然文字少少，但資訊量其實很豐富，懂的就懂？