开源图表库Highcharts教程:如何编写交互式图表的可访问描述

翻译|使用教程|编辑:吴园园|2019-08-20 11:32:18.660|阅读 36 次

概述:Highcharts是纯JavaScript编写的开源图表库,为你的Web应用程序提供直观的、交互式图表。本文将介绍如何编写交互式图表的可访问描述。

Highcharts是一款纯JavaScript编写的图表库,为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

在这篇访客博客文章中,textBOX将引导您完成一系列Highcharts图表,以解释如何利用新的独特图像描述方法来有效地描述您的内容。

在本详细教程中,您将了解人工生成的描述如何补充Highcharts并增强每个人的可访问性和用户体验。

开源图表库Highcharts教程:如何编写交互式图表的可访问描述

摘要

一开始使图表可访问似乎是一项艰巨的任务。使用焦点| LOCUS方法,您可以通过将图表解构为其数据元素来简化任务。

通过使用Highcharts辅助功能模块为您的图表添加说明,您将增加受众范围,促进包容性并提高内容的可发现性。通过描述讲述图表的故事将为用户带来改变,并帮助您将图表提升到新的水平。

开源图表库Highcharts教程:如何编写交互式图表的可访问描述

图像说明简介

数字时代是一种视觉体验。今天探索多媒体让我们了解到通过各种图形和图像传达的大量复杂信息。网站是身临其境的体验,鼓励我们与页面上的内容进行互动。然而,对于社会的大部分而言,这些图像仅仅是不可发现的空白。看不见和未知。

屏幕阅读器旨在读取Web上的文本,但是它们无法解释和描述非文本图形,例如照片,表格,图形和图表。内容提供商必须为数字作品中的每个有意义的图形添加文本替代,以便具有视觉或认知障碍(失明,阅读障碍)的读者可以平等地访问信息。

自动化技术目前无法生成符合Web内容行业标准的一致,高质量的替代文本。人工生成的图像描述仍然是最可靠的方法,并且在可预见的未来将保持这种方式。但是,许多内容提供商没有经验和资源来在内部创建人工生成的图像描述。

图像描述的重要性

编写替代文本内容需要学科专业知识,对作品中非文本图形的上下文的深思熟虑的解释,可访问性标准和指南的知识,以及HTML编码和XML设计。

内容提供商必须克服这些挑战,实施可访问的图像描述,以避免法律,教育和商业风险。此外,缺乏图像描述也会影响与年龄相关的损伤或使用旧技术或移动设备的非残疾用户。

将图像描述添加到数字内容有几个商业利益,例如增强可发现性,提高理解力和吸引用户。搜索引擎识别包含alt标签的图像,从而为内容提供商提供改善可访问性并吸引客户访问其产品和网站的机会。

具有可访问内容的提供商可以在在线市场中获得优于竞争对手的优势。其他商业利益包括:

  • 加强业务关系。

  • 促进平等获取信息。

  • 讲述企业社会责任的积极故事。

  • 增强所有用户的阅读体验。

虽然内容提供商可能存在最初的障碍,但实施可访问图像描述的长期好处超过了短期挑战。图像描述可帮助提供商避免风险,保持相关性并促进积极变化。

写可访问的图表说明

开源图表库Highcharts教程:如何编写交互式图表的可访问描述

包含Highcharts的文本说明使所有用户都可以访问您的内容并帮助讲述您的图表的故事。

焦点| LOCUS方法的基础是场景设置和讲故事,它们为图表描述创建了一个框架。为了设置图表的场景,我们使用内容的简要概述以及图表的结构描述来促进空间意识和理解。从这里开始,通过图表的数据元素构建逻辑路径来创建图表的故事。

Highcharts提供了各种图表类型以及通过其辅助功能模块添加说明的工具。让我们探索一系列图表以及如何描述每种不同的风格。每个图表描述都带有注释,以突出显示关键组件,例如概述,结构和数据元素。

图表+故事

开源图表库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教程:如何编写交互式图表的可访问描述

上面的折线图包含大量数据点。没有必要详细说明每个数据点,尤其是图表是交互式的,而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等村庄。

图表+数据范围

开源图表库Highcharts教程:如何编写交互式图表的可访问描述

与折线图一样,列范围图表传达了大量信息。在该示例中,有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教程:如何编写交互式图表的可访问描述

可变半径饼图以独特且信息丰富的方式巧妙地可视化两个数据集。然而,该表示纯粹是视觉的(基于截面宽度和深度)并且视觉受损的用户将难以与图形接合,除非提供描述。

描述可变半径饼图遵循与其他图设计相同的规则,其中包含用于趋势分析的上下文和空间感知以及数据点突出显示的概述和结构描述。

可变半径饼图比较了七个欧洲国家的人口密度和总土地面积:西班牙,法国,波兰,捷克共和国,意大利,瑞士和德国[简要说明]。该图表通过使用每个部分的宽度来表示数据,以表示总面积和用于表示人口密度的部分的深度。每个部分都根据国家/地区进行颜色编码,图表是交互式的:通过将鼠标悬停在每个部分上,数据点将显示在标注框中。该图表按逆时针方向的人口密度组织[结构说明]。

该图表是根据人口密度组织的,这是描述的重点。列出这些国家是为了向用户提供上下文。各个数据点可以直接从Highcharts数据标注中获取。

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

该描述现在识别关键的陆地质量数据点,并与人口密度进行有趣的比较,以帮助用户理解图形所代表的对比度。

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

图表+质量数据

开源图表库Highcharts教程:如何编写交互式图表的可访问描述

在某些情况下,图表说明了大量数据点并需要趋势分析。在上面的示例中,散点图可视化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]。

图表+比较

开源图表库Highcharts教程:如何编写交互式图表的可访问描述

一些图表明确地设计用于绘制数据之间的比较。一个很好的例子是蜘蛛网或极地图。最初,蜘蛛网图表的不寻常结构可能难以解释。但是,一旦设计被解构,我们发现它是比较一系列变量的数据集的简单方法。

蜘蛛网图表将分配的预算与组织内的实际支出进行比较[简要说明]。蜘蛛图有六个辐条。每个发言代表组织内的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]。

图表+交叉

开源图表库Highcharts教程:如何编写交互式图表的可访问描述

焦点| LOCUS方法通过首先解构图表然后定义元素及其关系来简化描述维恩图的过程。维恩图只是一组圆圈之间的一系列相互作用。在该示例中,有三个圆聚合以创建图。每个圆圈之间的交叉点创建一个新的组合值,这些交叉点列在描述中。

由三个相交圆构成的维恩图说明了无法实现的三角形[简要说明]。三个圆圈按顺时针方向标记为快速,便宜和良好[结构描述]。交叉点如下:

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

  • 便宜和良好等于需要时间来交付[LOCUS ELEMENT]。

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

  • 快速,廉价和良好等于他们梦想[LOCUS ELEMENT]。

图表+颜色的使用

开源图表库Highcharts教程:如何编写交互式图表的可访问描述

在我们的最终图表中,我们将探索更复杂的可视化。通过使用地理结构内的颜色编码来表示数据,拼贴地图创建视觉上引人注目的图形。下面的瓷砖地图可视化美国人口,每个颜色编码的瓷砖代表一个州,并根据州的地理位置定位。没有必要列出每个变量的值,因为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正版授权的朋友可以咨询慧都官方客服

更多精彩内容,敬请关注下方的微信公众号,及时获取产品最新资讯▼▼▼

图片2.jpg



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:Highcharts https://www.highcharts.com/blog/post/accessible-descriptions-for-interactive-charts/

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Highcharts

纯JavaScript编写的开源图表库,为你的Web应用程序提供直观的、交互式图表

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat