圖表
Last updated
Last updated
Highcharts 是目前已知無障礙做的最完整的圖表類型,基本上先照著它做應該就能獲得不錯的無障礙。範例中 Highcharts 是使用 iframe 的方式呈現,並且給出了 8 種情況的範例,而且每個圖表都至少有使用長文字描述該圖表的最重要資訊(而且範例還有影片可供觀看)。
基礎文字描述
資訊表格
鍵盤可操作:其實應該延伸出多種輸入裝置可操作,含語音輸入
螢幕報讀軟體可使用
低視覺可辨識:不要單只用顏色分辨,可使用 pattern 等方式區別
觸覺輸出:輸出 svg 並透過壓花列印技術印出可觸覺理解的圖表
圖表使用聲音傳達:將數據或線條趨勢轉化成音樂,使用社會習慣理解的高低音代表數據高低
提供各種資訊:以便認知上有不便的使用者,讓圖表更好理解
多國語言
其實基本上就都還是跟網頁無障礙規範要注意的東西一樣,只是還要根據圖表這個主題或情境多做一些優化,讓整體使用體驗更加出色。
Sara Soueidan 的經驗,推薦 <object>,理由如下:
基礎文字描述當作最後手段
單純 <svg> 雖然可以跟 js 和 css 搭配,但是會太複雜,而且要補充很多 aria
單純 <svg> 如果多個,id 可能重複,在檢查上會有困難
<object> 引用外部 <svg> 會比較適合,<svg> css 也不會被影響到
會需要使用 javascript ,不考慮 <iframe>
<object> 效能可能也比 <iframe> 好
透過 aria-label 與 aria-describedby 給予標題和長文字敘述解釋圖表
範例
總之就是將無障礙網頁規範都注意,然後針對特殊情況再做優化即可。
至於實作面目前還沒有最佳解,可以再多方嘗試,因為各有各的意見,而且也要看設計者的創意,再思考實作面要如何實現才是最適合的。
未來,基礎文字描述也許可以利用 AI 做更精確地即時解釋與語言翻譯,就不用在意內容要怎麼更新。