SuperAPI AI 工具集

svg

设计与创作

查看项目

更新于 10-16 00:29

技能介绍

用途:当项目包含 SVG 图形(内联 SVG、外部 SVG 文件、SVG 图标、插画或基于 SVG 的数据可视化)时加载本技能,用于创建、优化或审查 SVG 的无障碍实现。规范来源为 mgifford/ACCESSIBILITY.md 中的 examples/SVG_ACCESSIBILITY_BEST_PRACTICES.md,如有疑问以该示例为准。

主要能力:按图形用途与嵌入方式选择模式。装饰性 SVG 用 <img alt=""> 或 <svg aria-hidden="true" focusable="false"> 完全对辅助技术隐藏;有意义的 <img> 加载 SVG 用 alt 提供替代文本;简单有意义的内联 SVG 用 role="img" 配合 aria-labelledby 引用唯一 ID 的 <title>,或用 aria-label;按钮/链接内的图标由 HTML 控件承担可访问名称并隐藏 SVG;复杂图形提供简短名称、可见摘要与结构化数据表;复用 sprite 图标标注或隐藏每个外层实例而非共享 symbol;交互图形优先使用原生 HTML 控件并提供等价结构化替代。还涉及颜色对比与主题(currentColor、forced-colors)、SVG 内文本、动画与闪烁(prefers-reduced-motion、3Hz 闪烁阈值)、响应式与缩放(保留 viewBox)、独立 SVG 文档,以及不可信 SVG 的安全净化。

使用方式:先判断图形对用户的作用,再选择最简单的语义实现;可访问名称优先级为 aria-labelledby > aria-label > 直接子 <title>,描述用 aria-describedby > 直接子 <desc>;ID 需在整份 HTML 文档中唯一。

限制:<title>、<desc>、role="img" 或 aria-label 本身并不保证可访问,需在最终上下文中测试。不可信 SVG(上传、粘贴标记、AI 生成)必须用维护中的 SVG 感知净化器(如经审查配置的 DOMPurify)处理,不能把 DOMParser、XMLSerializer、格式化工具或 SVGO 当作净化器,也不能用正则表达式净化。ARIA Graphics Module 的结构化角色支持情况需用实际辅助技术组合测试。具体浏览器与辅助技术兼容细节、完整代码示例及更多图表要求,资料中未全部展开。