实务专题 · 网站交接

作品集图片替代文字:按用途写,不堆关键词

这是给网站交付需求使用的合成教学例,不是客户成果、真实账号测试或认证。

同一张图,可能需要三种不同的替代文字

设计工作室制作新作品集时,先问客户必须从图中知道什么、完成什么动作。提供信息的图、重复附近文案的图、只有图片的链接,不应使用同一套关键词描述。

虚构概念平面图:左侧工作室、右侧会议室,下方为入口。
原创虚构概念图,不是客户项目或可施工图纸。
用途合适的替代文字方向原因
信息图虚构概念平面图:左侧工作室、右侧会议室,下方为入口只描述真实画出的关系,不编造材质
完全重复旁边的等价说明确实冗余时可用空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日核验。输入与验收规则为原创教学设计;正式实施前还要核对当前平台版本及实际交付合同。

再核对实际下载的图片资源