用途:为图表、图形、仪表盘和交互式数据可视化提供无障碍参考数据,供 data-visualization-accessibility 智能体使用,属于参考资料而非审查器。
主要能力:
- 按图表类型给出无障碍要点。柱状图/条形图需提供要点文字总结、数据表替代、每根柱可键盘聚焦并朗读数值、除颜色外使用纹理区分系列;折线图需在替代文本中描述趋势、提供全部数据点表格、左右方向键在数据点间移动、用线型区分;饼图/环形图需配百分比数据表、每段可聚焦朗读、使用图案填充,且资料指出饼图通常可访问性较差,柱状图加表格往往更好;散点图需给出均值、中位数、相关性等汇总统计与全部点表格,大数据集交互探索可能不可行,应优先汇总;树状图/热力图需提供层级数据表替代、键盘导航与数值朗读,且相邻色阶对比度要足够。
- SVG 无障碍模式。静态图使用 figure 包裹 svg 并设置 role="img"、aria-labelledby 关联 title 与 desc、figcaption 中提供数据表链接;交互图使用 role="application"、aria-roledescription 与 aria-label,内部用 role="list"/"listitem" 并提供 tabindex 与 aria-label,配合 aria-live 区域播报;装饰性图使用 aria-hidden="true" focusable="false"。
- 图表库无障碍 API。Highcharts 可开启 accessibility、description、point 的 valueDescriptionFormat、keyboardNavigation 及其 order,并支持 sonification,内置自动表格回退、键盘导航、屏幕阅读器播报、高对比模式;Chart.js 基于 canvas,无 DOM 可遍历,需为 canvas 提供 aria-label 或回退表格,无内置键盘导航,需自行实现;D3 渲染 SVG,需手动为每个数据元素添加 role、tabindex、aria-label 并处理 keydown;Recharts 的 accessibilityLayer 属性可添加基础 ARIA,仍需补充数据表。
- 数据表回退模板,使用 details/summary 与带 caption、thead、scope="col" 的表格。
- 色觉友好调色板:Wong 8 色(黑 #000000、橙 #E69F00、天蓝 #56B4E9、蓝绿 #009E73、黄 #F0E442、蓝 #0072B2、朱红 #D55E00、紫红 #CC79A7)及各自用途;规则包括不得仅用红/绿区分(绿色盲影响约 8% 男性)、始终增加图案/形状/标签/位置等第二视觉通道、用色觉缺陷模拟工具(Sim Daltonism、Chrome DevTools 模拟视觉缺陷)测试、确保相邻颜色之间对比度足够。
- 键盘交互模型。单系列图表:Tab 进入/退出、左右方向键在数据点间移动、上下方向键在系列间移动、Enter/空格显示详情、Escape 退出、Home/End 跳到首末数据点。仪表盘:Tab 在图表部件间移动、Enter 进入交互图表、Escape 返回仪表盘层级、方向键在当前图表内导航。
使用方式与限制:资料为参考数据,不包含安装命令或独立运行步骤;具体集成方式、支持平台、收费与价格信息暂未提供。