这是给网站交付需求使用的合成教学例,不是客户成果、真实账号测试或认证。
同一张图,可能需要三种不同的替代文字
设计工作室制作新作品集时,先问客户必须从图中知道什么、完成什么动作。提供信息的图、重复附近文案的图、只有图片的链接,不应使用同一套关键词描述。
| 用途 | 合适的替代文字方向 | 原因 |
|---|---|---|
| 信息图 | 虚构概念平面图:左侧工作室、右侧会议室,下方为入口 | 只描述真实画出的关系,不编造材质 |
| 完全重复旁边的等价说明 | 确实冗余时可用空alt | 避免重复同一信息 |
| 只有图片的链接 | 查看虚构工作室概念 | 交代链接用途 |
运行填好的例子
下载有限规则Node检查器和已填写输入。使用Node 24或更新版本,不需要账号或API,也不联网。
node checks.mjs portfolio-alt-context portfolio-alt-context.json填好的输入记录了SVG中的STUDIO、MEETING、ENTRY三个真实标签。检查器只按用途输出草案,不会识图。请对照原图与附近文字;如果空alt让独有信息消失,就不合适。若重要图示信息没有别处提供,单写链接目的也可能不够。
验收时应索取什么
让编辑在内容系统中展示三种真实用途,检查链接的可访问名称、阅读顺序及附近图注是否已经等价说明。复杂图纸可以用简短alt配合附近正文交代必要关系,不要凭空添加尺寸、工程或施工能力声明。
本图只有三个区域,没有真实地址。本练习不认证WCAG合规,也不验证所有读屏软件。最终仍需人工检查上下文、键盘操作及实际可访问树;不会改动旧作品图、替代文字或主页大鸟。
官方依据与边界
W3C图片替代文字判断树:替代文字应按图片用途、是否冗余以及链接功能判断。
来源于2026年10月15日核验。输入与验收规则为原创教学设计;正式实施前还要核对当前平台版本及实际交付合同。