交互式图表需要提供等价的数据表格作为替代呈现
别名: 图表数据表 · accessible chart table · chart as table
概念解释
能筛选、能点选某一根柱子、能切换系列的图,一段写死的文字覆盖不了正在发生的查询。交互式图表需要一张等价数据表(equivalent data table):行列里装着图正在呈现的那批数,能被读、被搜、被键盘走完,并且筛选项一变,表跟着变。长描述报告趋势;表承担的是可查询的数据本身。
「等价」指当前视图里的数据,不是仓库里的全量备份。图上此刻只有 2023 年三个产品,表里就应该是这三行,而不是把十年历史一起倒出来。
机制
交互把数据集切成当前视图。看见图的人用指针问「这一根是多少」;不能用指针的人需要同一问题的非图形入口。静态长描述在筛选之前写好,筛选之后就撒谎。表按行列暴露值,辅助技术有单元格导航,视力正常但读图困难的人可以排序和搜索,键盘用户不必去命中一根 3 像素的柱子。
表与图若不同步,替代就变成另一份文档。隐藏系列、切换时间粒度、钻取到下一层,每一次都要让表的行列与图的当前编码一致。否则用户会以为自己在读图里的数,读到的却是上一视图的残骸。
怎么研究
给同一交互图两种条件:只有图加一段静态说明,以及图加一张随筛选更新的表。任务包括:读出指定系列在指定年份的值、在筛选后比较两个产品、把当前视图导出或抄出。
自变量:有无等价表、表是否随当前筛选更新、表是否可用键盘遍历。 因变量:任务完成率、筛选后答案是否仍指向当前视图、完成时间。
用键盘-only 和屏幕阅读器各走一遍表。只测「表存在于 DOM」不够,还要测表头是否真正标记了行列关系,否则读出来的是一堆无坐标的数。把第三方图表库的默认「data」面板纳入抽样,很多只对指针弹出,不进入键盘顺序。
边界
完全静态、点数很少的图,趋势长描述加邻近可见数字往往已经够用,硬配一张表会增加认知噪声。地图、网络图、三维散点的「表」难以保持空间关系,等价呈现可能是可查询的对象列表而不是二维网格。实时行情每秒刷新的表会造成播报风暴,需要暂停、降频或按用户请求才更新。保密场景不能把底层微数据铺进页面,等价应停在图已经公开的聚合层。
怎么落地
- 为可筛选、可点选、可切换系列的图提供一张与当前视图同行同列的数据表,放在图附近或通过可见开关打开。
- 筛选、隐藏系列、改变粒度时同步改表,不要留下上一视图的行。
- 表要用真正的表头单元格,让行列关系可被辅助技术导航;不要用无语义的网格 div 冒充。
- 验证:用键盘打开筛选,改一个条件,听或看表是否换成新视图的数,并读出指定单元格。图变了表没变,或表无法进入键盘顺序,判为没有等价呈现。