图表阅读器:为屏幕阅读器用户设计的无障碍可视化体验(Chart Reader: Accessible Visualization Experiences Designed with Screen Reader Users)

数据可视化使人们能够有效地探索数据并有效地交流见解。但可视化依赖视觉能力,而盲人或低视力人士有视觉缺陷。盲人或低视力人士主要使用屏幕阅读器辅助阅读,可它与大部分可视化不兼容。已有工作尝试从多方面弥补屏幕阅读器的不足,包括提供文本或表格、通过键盘等交互,但缺少系统性研究,没有可用性。

来自微软和美国华盛顿大学的研究者将已有的工作综合在一起,提供一个可访问引擎,了解如何平衡功能与可用的屏幕阅读器用户的可视化设计,同时探索设计空间。

本工作 [1] 综合已有工作的技术,以及本工具的特定设计需求,总结出五个核心设计维度。

  • 结构。图表需要重新组织以便于导航,比如将所有元素变为树结构。
  • 导航。遍历图表的方法,比如通过左右键、上下键切换元素。
  • 描述。所有元素的文本表示,可以转为音频,包括元素类型和值、以及特征。
  • 非语音的音频刺激。音调或者音乐,如通过音调编码数值大小。
  • 聚焦。通过修改或者删除的方式简化图表。比如对元素做筛选。

作者按这些维度开发了最初的原型系统,然后与合作伙伴开展一系列一对一的会议(称为并行协同设计)。

作者从微软招募10个BLVI设计伙伴,均为盲人和或弱势,经常使用屏幕阅读器浏览网页。一些精通数据探索和图表,也有的不了解图表。有些人具有辅助技术开发背景。通过三阶段的会议迭代设计,每次会议让用户带着问题探索,收集用户的反馈和设计见解,并根据意见迭代设计和原型。

最终的图表阅读器(Chart Reader)是通过js实现的。 底层文件包括数据表格、见解列表和图表配置。 数据表格保存为csv格式。见解列表表示为json格式,每个见解包含它的标题和标签文字、目标对象(数据子集)和类型(比如趋势)。图表配置类似于其他声明式语法。

图1:使用图表阅读器渲染的图表中的五个区域,以支持可访问的可视化体验。数据见解,每个
见解类型和见解的子区域,进一步细分为每个单独的见解。 X 轴,每个bin沿轴的子区域。 Y 轴,每个 bin沿轴的子区域。数据点区域。过滤器,每个系列都有子区域。

每个可视化组织成树结构,包含五个分支,分别是数据见解、X轴、Y轴、数据点和过滤器(图1)。

  • 数据见解按照类型分组,形成三层结构。选中见解可查看内容,以及直接导航至数据点。
  • X轴和Y轴提供轴和分箱(bin)的描述。x轴上的分箱包含该分箱上所有系列的平均值或总值。y轴上包含落在该区间的每个系列数据的百分比。
  • 数据点支持用户导航浏览。
  • 筛选。通过复选框筛选系列。
  • 其他导航方式。通过Home和End跳转至收首尾,通过Page Up和Down跳转五个元素。以及通过快捷键定位五个分支。
  • 声化处理。包括一个数据点、系列和多个系列比较的声化。

作者还总结了并行协同设计面向屏幕阅读器用户的无障碍可视化中的经验教训,这里选择其中一些重要的部分做介绍,更多细节参见原文。

  • 结构使得图表的导航和浏览更加方便。本工作采用的就是分层树结构,支持控制导航的粒度,在不同层级以及同一层级内切换。
  • 语音和声化结合可以帮助理解。将数据声化比转为语音读取的效率更高,且支持读取连续一段数据,此外当声化停止时播报当前数据的语音。
  • 导航过程中的用户的定位很重要。本工作通过主分支快捷键(比如X跳转至X轴),以及Home、End等快速跳转。
  • 控件与其他常见应用程序的约定尽量保持一致。比如左右箭头控制基本移动。
  • 描述见解可以帮助探索图表,但最好是采用特定的模板,方便阅读。

参考文献:

[1] John Thompson, Jesse Martinez, Alper Sarikaya, Edward Cutrell, and Bongshin Lee. Chart Reader : Accessible Visualization Experiences Designed with Screen Reader Users. In Proceedings of the CHI Conference on Human Factors in Computing Systems, 2023.

评论关闭。