圖表系列 ➍

圖表大門升級，請問你聽過可訪問性嗎？

如何說服團隊提升圖表可訪問性 | 遇到謝絕推銷怎麼辦

A11y新手村🏕

Published in

a11yvillage

9 min readOct 7, 2023

圖表大門升級，請問你聽過可訪問性嗎？想說服團隊提升圖表可訪問性，又擔心遇到謝絕推銷怎麼辦？或許你可以開一扇窗！

進到本篇主題前先回顧一下，我們在「圖表大門上了鎖，很重要嗎？」提到圖表可訪問性為什麼重要，舉了 Highcharts 團隊的 Business Case for Accessibility 說帖、 Highcharts White Paper 兩份文件，提供的 5 個「圖表可訪問性」為什麼重要的論點：1.擴張市占、2.提升品牌、3.驅動創新、4.避免違法、5.降低成本。以及我們的觀點：1.可以降低認知負擔、增加趣味性；2.關係到知的權利、增加讀者獲得資訊的多元性。如果你還沒看過，推薦你先閱讀看看，是否認同這些觀點，或者提出你自己的觀點！（傳送門）

知道很重要，但我能做什麼

如果你身在一個有圖表開發需求的團隊，不論是請廠商幫團隊開發圖表；或是負責開發出圖表的團隊，都可以做的第一件事就是認識到圖表可訪問性是什麼（推薦閱讀本系列第3篇）。

| 1.從身邊圖表問題開始

認識到圖表可訪問性後，可能發現很多圖表不在那麼「美」好，聽起來或許有點哀傷，但可能是某個人閱讀圖表的日常。若你所屬團隊有圖表發佈在網路上給公眾閱讀，即便不是負責開發的人，都鼓勵你可以去檢視或發覺圖表有沒有可訪問性問題。除了 Highcharts 團隊的說帖提到的好處外，數位環境的無障礙也很需要共同營造。雖然只有你周遭或你們家的圖表改善好像沒什麼，不過都會讓整個環境往好的方向發展。由於自身服務單位的性質帶有一些公共性，所以對團隊而言提升品牌、驅動創新，是提升圖表可訪問性很好的切入點。

| 2.從手邊圖表工具開始

我平時會使用程式來繪製資料圖表，如果你和我一樣會寫一點程式，肯定會發現市面上的圖表套件非常多。這些套件的共通點是，可以設定的參數非常多，但都有著自己的語法邏輯。通常必須要長時間使用、刻意學習一套圖表套件，才能夠用起來得心應手。其他 BI 工具，如 Tableau 、 PowerBI 等也有相同特性。認識到圖表可訪問性可能是什麼後，對於繪製圖表工具的評價也會發生改變，可能「上手」、「美觀」不再是第一考量。「可訪問性」變成選用工具的重要考量，這也讓我開始在每次有繪製圖表需求時，就嘗試使用可訪問性較佳的圖表套件，熟悉參數怎麼設定、套件的語法邏輯。在一人團隊、或者較為獨立作業的團隊中，沒有技術整合議題，使用哪種圖表工具可能只是一種個人選擇。所以會推薦你，瞭解不同圖表工具的可訪問性，擇善固執吧！

我好像需要一套溝通策略

這邊或許無法提供一套泛用的溝通策略，但可以分享我的自身經驗。身在一個小團隊，負責研究成果的視覺化呈現，所以接觸到圖表可訪問性議題。在一開始，圖表開發、視覺化討論中，可訪問性其實並不在討論議程上。開發上的核心目標，可能會聚焦在視覺、內容呈現上，如何讓閱讀圖表更加輕鬆、甚至愉悅。因此，圖表開發上非常注重視覺上的美觀、有趣的互動等等。

| 1.先試著放入議程，勇敢敲敲門

在讀過「A11y新手村」的其他文章之後，我開始在工作上逐步應用文章內提到的技巧和工具到專案中，並回報相關成果。例如，導入無障礙檢測工具，改善了N個問題。在我的過往經驗，若開發進度順利，其實導入技術、工具改善無障礙問題，主管、團隊並不會有負面回應，頂多是無回應。但請大家還是以工作為重，留在位置上才能做更多事啊！

| 2.嘗試轉移觀點，說說看賣點

從追求視覺美觀、互動有趣，到關注在提升圖表可訪問性，發現收獲到許多。在技術層面，原本因為市面圖表套件的客製化程度、費用等考量，以為自己可以用視覺創作工具，設計出一個美感還算滿意的圖表，再加上一些自以為是「互動」的動畫。實際去閱讀市面圖表套件的程式，才發現這些開發團隊做出了什麼樣的努力。瞭解到使用這些套件可以較輕易製作出一定程度令人滿意的圖表，甚至會覺得付費本來就是應該的（本來要說服團隊，反而自己先買單）！例如，在圖表可訪問性 Demo 開發過程中，就因為關注圖表可訪問性而意識到一些設計或技術上的侷限，例如頁面中的「聽聽看。猜猜看」最初希望讓讀者先聽到聲音，並在一個白板區塊畫出想像中的圖表。如何盡可能支援「用各種操作方式畫」、讀者怎麼感知到頁面「哪裡可以畫」、目前「畫得怎麼樣」。都是因為關注到提升可訪問性，所以在設計、開發上有了新的啟發。嘗試將這些歷程、為什麼這樣設計的考量說出來，或許能帶給團隊、訴求的對象不同的觀點！

| 3.圖表大門各種尺寸，來談談選擇

在本身使用圖表套件的經驗中，通常會選擇最容易上手、使用最順手的套件。 Python 許多人會選擇使用跟 Pandas （資料處理套件）整合度最好的 Plotly ，用 R 則常會使用 ggplot2 。不過關注到圖表可訪問性後，試著觀察圖表的設計會發現 Highcharts 的細心。

例如，圖表按數值尺度配色時，一般圖表套件多半是用圖例呈現。而 Highcharts 則很貼心的在 hover 時，會在配色尺（color scale）上出現箭頭，標示目前數值和最大最小值的相對位置。

相對於一般套件使用水平、垂直線輔助讀者判斷數值落在縱軸、橫軸哪個位置，在配色尺加上可見標示有助於減少對顏色的依賴。 — **滑鼠指到資料點，會同步在配色尺上標示和最大最小值相對位置**

而在語音感官上，除了支援在圖表、數列、資料點、註解等層級加註語義描述外，從11版之後「輸出 midi 格式音檔」也變成了圖表標準配備。在鍵盤導航到數列圖例時，會先說明「總共有 N 個數列，第一個數列是…」，先談總體資訊再進到細節的資訊層級設計。又或是圖表可聽化時，可以使用 earcon （ ear-icon ）突顯重要資料點。都是在開發圖表套件、閱讀圖表時讓我印象深刻的體驗。

根據 Chartability 的原則5「資訊流必須透明、容錯，並考量到多元且可能使用不同輔助科技的使用者，閱讀圖表時會有不同偏好」，Highcharts 支援用表格呈現圖表背後的數據，並且可以點選欄位名稱排序。都可以細細品味出，可訪問性開發團隊的用心，就如同精心布置展場，供製作圖表的我們可以恣意在最安心的環境中用數據創作。

曾經我在測試圖表時，為了「開啟 NVDA 螢幕閱讀器會讓圖表可見焦點消失」而感到焦慮，看到 Highcharts 可訪問性團隊主管 Øystein Moseng 回覆相關問題才讓我釋然，也在猜想這個可放問性團隊究竟泡在可訪問性議題有多深。另外，在支援「自己做圖表」詮釋資料的權力上，也可以看見 Highcharts 投入在改善 editor 資料編輯介面的可訪問性，或開發出 Highcharts GPT 這類免寫程式就能製作圖表的服務。

雖然經驗上告訴我，現階段 Highcharts 是很棒的選擇。但在 Python 開發上仍會碰到許多卡卡的狀況。卡卡的狀況是指程式語言就如同台語、英語，每個套件的語法特性不同，就像有些詞彙用別的語言講似乎沒那麼到位，或文法上就是不太流暢。不過使用 JavaScript 就可以有很好的體驗，也可以很輕易搭配不同前端框架。而且慶幸服務單位屬於非營利性質所以導入時不用負擔商用成本，不過我清楚多數的單位狀況就會不同。所以或許可以試著理解，沒有一種圖表大門適合所有人！

有時靜態的圖表、搭配表格及良好的說明文字，也可以讓圖表讀者有不錯的閱讀體驗。而在選擇可以互動的圖表套件時，建議大家可以看看自己常用圖表套件是否有 accessibility 頁面，除了反映圖表套件維護團隊想體現的價值，也可以讓製作圖表的我們知道有哪些情境該留心，又在哪些情境可以稍微放心。例如 Highcharts 、 Chart.js 有獨立的可訪問性說明頁。而 D3 或基於D3發展出的套件 Vega (-lite) 、 Vega-Altair 等等，普遍都需要圖表製作者自行改善可訪問性。最直接的方法是，試著用鍵盤、聲音輸入等方式操作圖表、跟圖表互動，又或是跟著 Chartability 原則檢視。

檢視自己開發圖表的歷程，從喜歡 Plotly 跟 Pandas 整合度和互動性，到轉向 Vega-Altair 的圖層式語法邏輯和簡潔，再到一度想自己造輪子，最後轉向了 Highcharts 的可訪問性。發現在選用圖表套件時，會同時考量開發難度、互動性、美觀以及可訪問性等標準，歷程中是不同標準在心中優先順位變動。雖然瞭解某些圖表套件開發起來較困難，但可訪問性卻照顧到許多面向，或許也是不同維護團隊設定的目標優先順位不同。所以，當有選擇的時候，擇善固執吧！

本篇文章原先設定是，提出一套說服團隊改善圖表可訪問性的說帖、溝通策略。不過在撰文過程發現，從自身出發似乎更有能量，能夠先說服自己，有可能做出更多改變。主要是基於個案經驗，不是最佳實踐方案，不一定能適用到所有團隊。希望邀請你在小專案或 side project 一起實踐看看！試著將圖表可訪問性，帶到團隊的討論議程中。也歡迎有相關經驗的你，來「 A11y 新手村」臉書粉專留言跟我們分享、互動！