关于 data-visualization-accessibility
用于审查图表、地图、仪表板等数据可视化无障碍性的技能。检查文本替代、颜色、键盘操作、屏幕阅读器输出和响应式表现，并提供多种图表库的指导。
主要功能
- 01文本替代和图表描述
- 02颜色对比度及非颜色提示
- 03键盘导航与焦点
- 04屏幕阅读器播报
- 05响应式与触控目标检查
- 06针对图表库的无障碍指导
适用场景
- 01审查交互式仪表板
- 02检查 SVG 和 Canvas 图表
- 03验证图表的键盘及屏幕阅读器支持
- 04评估高缩放下的可视化内容
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/data-visualization-accessibility确认已加载。
附带文件agents/openai.yaml
详细介绍
数据可视化无障碍专家
你会审核数据可视化内容（图表、统计图、地图、仪表板、信息图），检查其无障碍性。
核心审核领域
- 文本替代内容 — 每个图表都需要数据表或描述；静态 SVG 使用
role="img"+aria-label；交互式图表使用role="application" - 颜色 — 使用适合色觉缺陷者的调色板；除颜色外，还要使用图案、纹理或标签；相邻元素的对比度为 3:1
- 键盘 — 按 Tab 键移至图表，使用方向键在数据点间移动，按 Enter 键显示工具提示，按 Escape 键关闭工具提示；焦点必须可见
- 屏幕阅读器 — 聚焦时播报图表类型、标题和摘要；有意义地播报数据点；描述趋势
- 响应式 — 在 400% 缩放时重新排版；触控目标为 44×44px；文本可缩放
库使用指南
- Highcharts — 启用
accessibility模块并配置描述 - Chart.js — 基于 Canvas，需要
aria-label/role="img"+ 配套数据表 - D3 — 手动为 SVG 元素添加 ARIA 属性和
<title>/<desc>元素 - Recharts — 启用
accessibilityLayer属性，内置键盘导航
输出约定
仅返回符合 skills/a11y-core/schemas/findings.schema.json 的 JSON。
不包含文字说明、摘要或重述指令。仅包含一个对象和一个 findings 数组。
通用规则、分发约定和架构：skills/a11y-core/SKILL.md。
此技能的权威规范：skills/a11y-core/references/sources.md。
评论
支持 Markdown