Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。

在這篇訪客博客文章中，textBOX將引導您完成一系列Highcharts圖表，以解釋如何利用新的獨特圖像描述方法來有效地描述您的內容。

在本詳細教程中，您將了解人工生成的描述如何補充Highcharts并增強每個人的可訪問性和用戶體驗。

摘要

一開始使圖表可訪問似乎是一項艱巨的任務。使用焦點| LOCUS方法，您可以通過將圖表解構為其數據元素來簡化任務。

通過使用Highcharts輔助功能模塊為您的圖表添加說明，您將增加受眾范圍，促進包容性并提高內容的可發現性。通過描述講述圖表的故事將為用戶帶來改變，并幫助您將圖表提升到新的水平。

圖像說明簡介

數字時代是一種視覺體驗。今天探索多媒體讓我們了解到通過各種圖形和圖像傳達的大量復雜信息。網站是身臨其境的體驗，鼓勵我們與頁面上的內容進行互動。然而，對于社會的大部分而言，這些圖像僅僅是不可發現的空白。看不見和未知。

屏幕閱讀器旨在讀取Web上的文本，但是它們無法解釋和描述非文本圖形，例如照片，表格，圖形和圖表。內容提供商必須為數字作品中的每個有意義的圖形添加文本替代，以便具有視覺或認知障礙（失明，閱讀障礙）的讀者可以平等地訪問信息。

自動化技術目前無法生成符合Web內容行業標準的一致，高質量的替代文本。人工生成的圖像描述仍然是最可靠的方法，并且在可預見的未來將保持這種方式。但是，許多內容提供商沒有經驗和資源來在內部創建人工生成的圖像描述。

圖像描述的重要性

編寫替代文本內容需要學科專業知識，對作品中非文本圖形的上下文的深思熟慮的解釋，可訪問性標準和指南的知識，以及HTML編碼和XML設計。

內容提供商必須克服這些挑戰，實施可訪問的圖像描述，以避免法律，教育和商業風險。此外，缺乏圖像描述也會影響與年齡相關的損傷或使用舊技術或移動設備的非殘疾用戶。

將圖像描述添加到數字內容有幾個商業利益，例如增強可發現性，提高理解力和吸引用戶。搜索引擎識別包含alt標簽的圖像，從而為內容提供商提供改善可訪問性并吸引客戶訪問其產品和網站的機會。

具有可訪問內容的提供商可以在在線市場中獲得優于競爭對手的優勢。其他商業利益包括：

• 加強業務關系。

• 促進平等獲取信息。

• 講述企業社會責任的積極故事。

• 增強所有用戶的閱讀體驗。

雖然內容提供商可能存在最初的障礙，但實施可訪問圖像描述的長期好處超過了短期挑戰。圖像描述可幫助提供商避免風險，保持相關性并促進積極變化。

寫可訪問的圖表說明

包含Highcharts的文本說明使所有用戶都可以訪問您的內容并幫助講述您的圖表的故事。

焦點| LOCUS方法的基礎是場景設置和講故事，它們為圖表描述創建了一個框架。為了設置圖表的場景，我們使用內容的簡要概述以及圖表的結構描述來促進空間意識和理解。從這里開始，通過圖表的數據元素構建邏輯路徑來創建圖表的故事。

Highcharts提供了各種圖表類型以及通過其輔助功能模塊添加說明的工具。讓我們探索一系列圖表以及如何描述每種不同的風格。每個圖表描述都帶有注釋，以突出顯示關鍵組件，例如概述，結構和數據元素。

圖表+故事

上面的區域圖表從兩個角度講述了一個故事：美國和蘇聯。這些敘述交織在一起，故事隨著描述捕捉圖表中所示的視覺元素而出現。簡單地使用列表重復數據點將創建一個漫長而無趣的描述。數據的故事應該在描述中展開，突出顯著的興趣點并比較發展中的敘述。

為用戶設置場景，并概述圖表的內容。

面積圖比較了1945年至2017年間美國和蘇聯/俄羅斯的核儲存[簡要說明]。核武器的數量繪制在Y軸上，年份繪制在X軸上。該圖表是互動的，可以追蹤每個國家的年度庫存水平[結構說明]。

概述和結構描述允許用戶可視化圖表并具有他們將要接收的信息的上下文。該圖表顯示了不同類別的定量值如何在規定的時間段內發生變化。圖表的故事始于時間范圍的開頭，在這種情況下，1945年成為我們描述的焦點，起點。我們可以在時間軸上從左到右跟蹤定量值，以告訴圖表的故事。

1945年核武器時代初期，美國擁有6枚核武庫[FOCUS ELEMENT]。到1950年，當蘇聯以6種武器[LOCUS ELEMENT]參加軍備競賽時，這個數字逐漸增加到369。

通過突出顯示數據的高點和低點以及可比較的時序，描述繼續講述。

此時，美國開始迅速建立其庫存，到1966年達到了32,040枚彈頭，而蘇聯的7,089枚[LOCUS ELEMENT]。從1966年的這個高峰期開始，隨著蘇聯庫存的擴大，美國的庫存逐漸減少。到1978年，蘇聯已將核空白縮小至25,393 [LOCUS ELEMENT]。蘇聯的庫存繼續增長，直到1986年達到45,000的峰值，而美國的庫存為24,401 [LOCUS ELEMENT]。

圖表的最后一部分講述了根據和平條約和蘇聯解體而減少任何一方庫存的故事。

從1986年開始，兩國的核庫存開始下降。到2000年，美國和俄羅斯的數字分別下降到10,577和21,000 [LOCUS ELEMENT]。這種下降持續到2017年，此時美國持有4,018件武器，而俄羅斯的4,500件[LOCUS ELEMENT]。

故事情節現已完成。用戶可以全面了解該期間美國和蘇聯的可比核武器庫存情況。

圖表+關鍵數據

上面的折線圖包含大量數據點。沒有必要詳細說明每個數據點，尤其是圖表是交互式的，而Highcharts提供的功能允許您仔細地瀏覽數據。描述需要傳達圖表中捕獲的關鍵信息，并向用戶提供數據的概述。

空間意識是理解無視力用戶的關鍵。提供圖表的結構描述允許用戶可視化圖表并使他們適應的數據適應環境。

帶注釋的線圖顯示了2017年環法自行車賽的第8階段，從Dole的起點到Station des Rousses的終點線[簡要說明]。海拔高度繪制在Y軸上，增量為500米，距離繪制在X軸上，增量為25千米。線圖是交互式的，用戶可以沿著舞臺[結構描述]追蹤每100米點的高度等級。

線圖注釋為在比賽階段突出顯示興趣點。焦點| LOCUS方法采用這些元素并將它們構建為沉浸式敘述性描述。

圖表以數據線下方的陰影顯示，以顯示在187.5公里的舞臺[FOCUS ELEMENT]上遇到的山地高度。三個最大的攀登在Col de la Joux，C?tedeViry和最后11.7公里，6.4％梯度爬升至Montéedela Combe de Laisia Les Molunes，海拔1200米[LOCUS ELEMENT]。舞臺沿著路線[LOCUS ELEMENT]穿過Arbois，Montrond，Bonlieu，Chassal和Saint-Claude等村莊。

圖表+數據范圍

與折線圖一樣，列范圍圖表傳達了大量信息。在該示例中，有36個主要數據點：低溫，高溫和溫度范圍。同樣，Highcharts允許用戶單步執行各個數據點，因此不必詳細說明描述中的每個數據點。描述的目的是傳達最相關的信息。我們正在為用戶創建數據快照，就像有視力的用戶選擇他們所需的信息一樣。

說明的開頭為用戶設置場景：

列范圍圖表比較了挪威Vik I Sogn 2017年的月度溫度變化[簡要說明]。該圖表是交互式的，顯示懸停在數據上的每個月的溫度范圍。溫度在X軸上以攝氏度為單位測量，月份在Y軸上繪制[結構描述]。

現在我們已經定義了結構，我們可以選擇關鍵數據點并將它們呈現給用戶：

最低溫度記錄在3月零下10.2攝氏度[焦點元素]。12月份的最低溫度范圍從零下9到最高8.6攝氏度[LOCUS ELEMENT]。7月最高溫度為26.2攝氏度[LOCUS ELEMENT]。7月份的最高溫度范圍為6至26.2攝氏度[LOCUS ELEMENT]。5月份最廣泛的溫度范圍從零下0.6到最高23.1攝氏度[LOCUS ELEMENT]。

該描述為用戶提供了關鍵數據趨勢，他們現在可以自信地計劃到Vik的旅行以及他們需要的適當服裝。

圖表+視覺表示

可變半徑餅圖以獨特且信息豐富的方式巧妙地可視化兩個數據集。然而，該表示純粹是視覺的（基于截面寬度和深度）并且視覺受損的用戶將難以與圖形接合，除非提供描述。

描述可變半徑餅圖遵循與其他圖設計相同的規則，其中包含用于趨勢分析的上下文和空間感知以及數據點突出顯示的概述和結構描述。

可變半徑餅圖比較了七個歐洲國家的人口密度和總土地面積：西班牙，法國，波蘭，捷克共和國，意大利，瑞士和德國[簡要說明]。該圖表通過使用每個部分的寬度來表示數據，以表示總面積和用于表示人口密度的部分的深度。每個部分都根據國家/地區進行顏色編碼，圖表是交互式的：通過將鼠標懸停在每個部分上，數據點將顯示在標注框中。該圖表按逆時針方向的人口密度組織[結構說明]。

該圖表是根據人口密度組織的，這是描述的重點。列出這些國家是為了向用戶提供上下文。各個數據點可以直接從Highcharts數據標注中獲取。

德國的人口密度最高，為每平方公里235.6人，其次是瑞士，意大利，捷克共和國，波蘭，法國和西班牙[FOCUS ELEMENT]。

該描述現在識別關鍵的陸地質量數據點，并與人口密度進行有趣的比較，以幫助用戶理解圖形所代表的對比度。

法國的陸地面積最大，為551,500平方公里[LOCUS ELEMENT]。西班牙是第二大國家，面積為505,370平方公里，但人口密度最低，為每平方公里92.9人[LOCUS ELEMENT]。瑞士是陸地面積最小的國家，面積為41,277平方公里，但人口密度第二高，為每平方公里214.5人[LOCUS ELEMENT]。

圖表+質量數據

在某些情況下，圖表說明了大量數據點并需要趨勢分析。在上面的示例中，散點圖可視化507個單獨的數據點。沒有必要列出每個數據點 - 如果需要，每個數據點都可以通過Highcharts作為數據表使用 - 但描述應該向用戶提供關鍵數據趨勢。趨勢分析對于無法進行詳細數據描述的海量數據圖表至關重要。

散點圖按性別比較507個人的身高和體重[簡要說明]。在X軸上繪制以厘米為單位的高度，在Y軸上繪制以千克為單位的重量。圖表是交互式的，每個數據點都可以懸停在上面，以顯示每個人的高度和重量數據[結構描述]。

描述趨勢涉及定義變量的數據范圍。在該示例中，我們可以識別男性和女性的身高和體重的高值和低值。這提供了數據范圍，但異常值可能會對這些數字產生明顯的影響。例如，只有兩個人的身高超過195厘米，并且有很大比例的身高值聚集在175到180厘米之間。通過添加估計的濃度值，我們可以幫助用戶更好地理解圖表所代表的數據。

散點圖按性別劃分相當均勻，女性占據圖表的左側，男性占據右側。雌性的身高數據范圍為147.2至182.9厘米，最大濃度為160至165厘米[FOCUS ELEMENT]。女性的體重數據范圍為42至105.2公斤，最大濃度為60公斤左右[LOCUS ELEMENT]。

男性的身高數據范圍為157.2至198.1厘米，最大濃度為175至180厘米[LOCUS ELEMENT]。男性的體重數據范圍為53.9至116.4千克，最大濃度為約80千克[LOCUS ELEMENT]。

圖表+比較

一些圖表明確地設計用于繪制數據之間的比較。一個很好的例子是蜘蛛網或極地圖。最初，蜘蛛網圖表的不尋常結構可能難以解釋。但是，一旦設計被解構，我們發現它是比較一系列變量的數據集的簡單方法。

蜘蛛網圖表將分配的預算與組織內的實際支出進行比較[簡要說明]。蜘蛛圖有六個輻條。每個發言代表組織內的6個部門之一：銷售，營銷，開發，客戶支持，信息技術和管理。圖表是交互式的，并且在懸停[結構描述]時顯示每個數據點。

用戶現在知道圖表的結構，我們可以繼續簡要地突出顯示圖表中的關鍵比較數據。

該圖表清楚地表明，6個部門中有4個部門的預算超支，市場營銷負責最大的超支20,000美元[比較]。

雖然圖表中的數據點是交互式的，但為用戶包含比較數據很有用。

每個部門的分配預算和實際支出數據點如下：

• 銷售。預算等于43,000美元; 消費等于50,000美元[FOCUS ELEMENT]。

• 營銷。預算等于19,000美元; 支出等于39,000美元[LOCUS ELEMENT]。

• 發展。預算等于60,000美元; 支出等于42,000美元[LOCUS ELEMENT]。

• 客戶支持。預算等于35,000美元; 支出等于31,000美元[LOCUS ELEMENT]。

• 信息技術。預算等于17,000美元; 支出等于26,000美元[LOCUS ELEMENT]。

• 管理。預算等于10,000美元; 支出等于14,000美元[LOCUS ELEMENT]。

圖表+交叉

焦點| LOCUS方法通過首先解構圖表然后定義元素及其關系來簡化描述維恩圖的過程。維恩圖只是一組圓圈之間的一系列相互作用。在該示例中，有三個圓聚合以創建圖。每個圓圈之間的交叉點創建一個新的組合值，這些交叉點列在描述中。

由三個相交圓構成的維恩圖說明了無法實現的三角形[簡要說明]。三個圓圈按順時針方向標記為快速，便宜和良好[結構描述]。交叉點如下：

• 快速和便宜等于不是最好的質量[焦點元素]。

• 便宜和良好等于需要時間來交付[LOCUS ELEMENT]。

• 好又快等于更貴[LOCUS ELEMENT]。

• 快速，廉價和良好等于他們夢想[LOCUS ELEMENT]。

圖表+顏色的使用

在我們的最終圖表中，我們將探索更復雜的可視化。通過使用地理結構內的顏色編碼來表示數據，拼貼地圖創建視覺上引人注目的圖形。下面的瓷磚地圖可視化美國人口，每個顏色編碼的瓷磚代表一個州，并根據州的地理位置定位。沒有必要列出每個變量的值，因為Highcharts為每個狀態和完整數據表提供交互式數據調出。描述可以集中于識別趨勢和重要數據值。

瓷磚地圖代表2016年按人口分列的美國州[簡要說明]。六角形瓷磚的位置可以在地理上回顯美國的地圖。彩色編號的圖例表明人口水平低于100萬（米色），1至500萬（橙色），500萬至2000萬（粉紅色）和超過2000萬（粉紅色）。圖表是交互式的，并且在懸停[結構描述]時顯示各個狀態數據點。

在大多數情況下，在圖表描述中包含對顏色的引用并不重要。該顏色有助于有視力的讀者閱讀圖形并識別系列數據，但數據對于沒有視力的用戶來說已經足夠了。但是，在這種情況下，數據采用顏色編碼，以顯示種群大小，是理解圖形的關鍵。包括對顏色的引用也將幫助有視力的讀者討論組內的內容，因為有視覺的用戶通過使用顏色來解釋圖形。

本說明書的其余部分突出了圖表中的關鍵數據點：人口水平高低和地理集中趨勢。

三個州的人口超過2000萬：加利福尼亞州（3930萬），德克薩斯州（2790萬）和佛羅里達州（2060萬）[FOCUS ELEMENT]。美國北部地區從西北部的馬薩諸塞州到中西部的伊利諾伊州，人口最多，人口達到500萬到2000萬[LOCUS ELEMENT]。美國南部地區從東南部的南卡羅來納州到西南部的新墨西哥州，人口最多，人口為1至5百萬[LOCUS ELEMENT]。6個州的人口不到100萬; 這些包括阿拉斯加，特拉華州，懷俄明州，北達科他州，南達科他州和佛蒙特州[LOCUS ELEMENT]。人口最少的州是西北地區的懷俄明州，有584,153人[LOCUS ELEMENT]。

完成的描述傳達了內容的策劃快照。

想要購買Highcharts正版授權的朋友可以。

更多精彩內容，敬請關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼