圖表

直接上範例

AccessibilityHighcharts

Highcharts 是目前已知無障礙做的最完整的圖表類型，基本上先照著它做應該就能獲得不錯的無障礙。範例中 Highcharts 是使用 iframe 的方式呈現，並且給出了 8 種情況的範例，而且每個圖表都至少有使用長文字描述該圖表的最重要資訊（而且範例還有影片可供觀看）。

從 Highcharts 提煉要點

• 基礎文字描述

• 資訊表格

• 鍵盤可操作：其實應該延伸出多種輸入裝置可操作，含語音輸入

• 螢幕報讀軟體可使用

• 低視覺可辨識：不要單只用顏色分辨，可使用 pattern 等方式區別

• 觸覺輸出：輸出 svg 並透過壓花列印技術印出可觸覺理解的圖表

• 圖表使用聲音傳達：將數據或線條趨勢轉化成音樂，使用社會習慣理解的高低音代表數據高低

• 提供各種資訊：以便認知上有不便的使用者，讓圖表更好理解

• 多國語言

其實基本上就都還是跟網頁無障礙規範要注意的東西一樣，只是還要根據圖表這個主題或情境多做一些優化，讓整體使用體驗更加出色。

實作層面

Sara Soueidan 的經驗，推薦 <object>，理由如下：

• 基礎文字描述當作最後手段

• 單純 <svg> 雖然可以跟 js 和 css 搭配，但是會太複雜，而且要補充很多 aria

• 單純 <svg> 如果多個，id 可能重複，在檢查上會有困難

• <object> 引用外部 <svg> 會比較適合，<svg> css 也不會被影響到

• 會需要使用 javascript ，不考慮 <iframe>

• <object> 效能可能也比 <iframe> 好

• 透過 aria-label 與 aria-describedby 給予標題和長文字敘述解釋圖表

範例

<object
    role="img" 
    aria-label=“Khan Academy Math usage level in Long Beach. Chart."
    aria-describedby="long_beach_desc"

    type="image/svg+xml" data="/images/long_beach.svg">

        <p id="long_beach_desc">Khan Academy math usage for 30 minutes per week proved to 
           improve more than 5,000 Long Beach students scores by 2 times 
           in the Smarter Balanced Assessment.</p>

</object> 

結論

總之就是將無障礙網頁規範都注意，然後針對特殊情況再做優化即可。

至於實作面目前還沒有最佳解，可以再多方嘗試，因為各有各的意見，而且也要看設計者的創意，再思考實作面要如何實現才是最適合的。

未來，基礎文字描述也許可以利用 AI 做更精確地即時解釋與語言翻譯，就不用在意內容要怎麼更新。

參考來源

• https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/#accessible-data-charts

• https://www.sarasoueidan.com/blog/accessible-data-charts-for-khan-academy-2018-annual-report/

• https://academy.datawrapper.de/article/206-how-we-make-sure-our-charts-maps-and-tables-are-accessible

• https://academy.datawrapper.de/article/330-how-to-write-good-alternative-descriptions-for-your-data-visualization

• https://fossheim.io/writing/tag/dataviz/