网页应用

SVG 替代文字怎么写?区分内容图片与装饰

编写与维护:甜番茄电商科技有限公司 · 更新于

有信息意义的 SVG 应提供能表达用途的替代文字,纯装饰则避免重复播报。文字描述重点是图像传递的信息,而不是机械地写一串颜色和路径形状。

先判断问题与适用条件

标志链接需要说明目的地,状态图标需要表达状态;同一按钮已有清楚文字时,旁边的小图标通常无需再读一次。内联 SVG 和 img 的无障碍标注方式不同。

按顺序处理与检查

  1. 判断图片是否承担内容、操作或纯装饰作用。
  2. 为信息图片写简洁语义说明,装饰图用空替代文字。
  3. 检查键盘与读屏体验,避免按钮名称重复或缺失。

完成后怎样验收

不要把关键词堆进 alt 文本。复杂图表可能需要附近的文字解释或数据表,单句替代文字无法代替全部信息;SVG 文件名也不能替代可访问名称。

SVG 格式依据与参考资料

SVG 可以同时包含矢量形状、图像和文字。因此,文件名以 .svg 结尾,并不能单独证明原图已转换成可编辑路径。W3C SVG 2 规范:SVG 图形对象说明了这些对象类型。

以上资料用于说明文件格式。本站的上传限制、会员要求、结果保存与编辑能力,以页面说明和实际功能为准。

本篇延伸资料