用途:当项目包含图表、图形、数据可视化或信息图(柱状图、折线图等)时加载此技能,用于创建或审查数据可视化,使其无需依赖颜色感知、视觉位置、指针操作或未解释的图形即可传达信息并支持预期任务。权威来源为 mgifford/ACCESSIBILITY.md 中的 examples/CHARTS_GRAPHS_ACCESSIBILITY_BEST_PRACTICES.md,有疑问时以该示例为准。
主要能力与要求:先明确“图表要回答什么问题”,再选择图表类型;采用分层信息模型——标题、上下文(范围、日期、单位、总体、筛选)、摘要(主要趋势/比较/结论)、结构化细节、来源与方法、交互反馈,不要把各层都塞进一个长 alt、SVG title 或 aria-label。严重程度分级为 Critical(无任何无障碍替代)、Serious(替代不完整或显著误导)、Moderate(颜色独立性或对比度缺口)、Minor(最佳实践差距)。给定各类起点建议:单一结论用可见文本,精确比较用 HTML 数据表,静态可缩放用 SVG,密集渲染用 Canvas + 可见 HTML 摘要,探索/筛选用图表 + 原生 HTML 控件,空间关系用地图/图表 + 等效文字;当表格或短段落更清楚时,改用更简单表示。
必要用法要点:每个图表必须有文字替代,简单图用简洁 alt,复杂图用简短标识 + 可见长描述,正文已含同一结论时 alt 可精简;需要精确值时提供结构化数据(如 details 中的 table),大数据集提供可筛选表格与 CSV 下载,说明缺失、抑制、估算、四舍五入值的表示方式。SVG:原子图像用 role="img" + title/aria-describedby;结构化或可交互 SVG 不要用 role="img" 扁平化,ARIA Graphics 模块支持需实测。Canvas 绘制像素,AT 无法获取对象,必须同步相邻摘要/表格;不要只把关键细节放在 canvas 绘制命令或库配置中。颜色不得作为唯一区分手段,建议 Okabe-Ito 调色板与 ColorBrewer,需测试完整图表包括线宽、点大小、重叠、选中态与主题;对比度文字≥4.5:1、非文字图形信息≥3:1。数据浏览与操作分离,用原生 HTML 控件做图例与筛选,不要把数百数据点加入 Tab 序列。键盘交互优先常规 Tab;复合导航模型需文档化说明、进入/退出与活动项名称/值/状态;悬停不得是发现数值的唯一方式,大段细节用 disclosure;动态更新用 role="status" 报告;动画尊重 prefers-reduced-motion 并提供暂停/停止;响应式在 320 CSS 像素与 400% 缩放测试,必要时仅让图表/表格二维滚动并标名。
限制:资料未提供具体库安装命令、收费、平台或效果数据;各图表库无障碍模块须查阅当前文档并始终用相邻数据表补充,生成的 ARIA 需团队自行检查无障碍树,不能依赖营销描述。