思维模型

图片替代文本

根据图片在页面中的用途,用文字传达它的关键信息或功能。

探索一下

替代文本用文字传达图片的信息或功能。屏幕阅读器可以把这些文字转换成语音或盲文。在写替代文本之前,你应该先确定什么?

选择第一步

学会根据图片的用途选择替代文本。

理解概念

理解概念

替代文本用文字传达图片的信息或功能。屏幕阅读器可以把这些文字转换成语音或盲文。具体该怎么写,要看图片为什么出现在页面上。选一张图片,想想它为页面提供了什么。

详细讲解

详细讲解

先判断图片是在传达重要信息、承担某种功能,还是仅仅用来装饰。对于传达信息的图片,用简短的描述说明关键信息。哪些细节重要,要看上下文:WAI 解释说,相比介绍公园的网站,介绍鸟类的网站可能更需要准确描述鸟的外观。图片教程

对于用作链接或按钮的功能性图片,要描述链接的目标或按钮的操作。假设一个链接通向 PDF 格式的员工手册,而且链接中只有一个文档图标。PDF 是一种文档文件格式。“员工手册(PDF)”比“PDF 文档图标”更清楚地说明了链接通向哪里,后者只是在描述图标的外观。

如果图片的唯一用途是视觉装饰,就为它提供空的替代文本。在页面代码中,alt 属性用来提供图片的替代文本;alt="" 表示它的值为空。假设一篇旅行博客中的日落照片只用来装饰,就应使用这个空值。仅凭图片有配文,不能认定它是装饰性图片:你需要先判断,它是否提供了对理解页面很重要的信息。

并非每张图片都能用简短描述交代清楚。对于图表、示意图等复杂图片,要用文字完整传达其中的数据或详细信息。WAI 还建议,除标志外,应避免把供人阅读的文字放在图片中;如果使用了包含文字的图片,替代文本应包含相同的文字。做出这些决定,需要作者了解图片的用途、上下文和内容。这份教程提供的是实现指导,并非实验证据,也不能保证符合法律要求。图片教程

研究依据

研究依据

  • 官方指导:WAI 区分了信息性、装饰性和功能性图片。它们的替代文本分别用于传达关键信息、在仅作装饰时使用空值,或描述链接或按钮的功能 [1]
  • 官方指导:复杂图片需要用文字完整传达其中的数据或详细信息。教程没有统一要求替代文本只能写一句话 [1]
  • 指导范围:教程汇集了与 A 级的“非文本内容”、AA 级的“文本图像”和 AAA 级的“文本图像(无例外)”有关的资源。这些属于不同的 WCAG 符合性级别;概述没有完整列出每项准则的条件和例外 [1]

适用局限

适用局限

所提供的来源是官方实现指导,并非衡量导航、理解或行为效果的实验。它不能证明这些做法普遍有益,也不能保证符合法律要求。其中对图片类别的概述,不应被当作 WCAG(《Web 内容无障碍指南》)的完整要求。

所提供的证据无法核实旧版中的“Henry 等人(2014)”引用及其声称的导航效果,因此这些内容已被移除。现在改用 WAI 的《图片教程》作为指导来源。此前为该教程标注的 2024 年也已移除;所提供的参考文献将其年份记为未知。员工手册和日落照片的例子,都是对这份指导的假设性应用。

参考来源

参考来源

试一试

检验你的理解

假设一篇旅行博客中的海滩日落照片仅用于视觉装饰,没有提供对理解页面很重要的信息。哪种替代文本符合 WAI 的指导?

查看文章解释

答案: ""(空的 alt 属性)

WAI 建议,当图片的唯一用途是装饰时,应使用空的替代文本。题目中说明的用途决定了答案;仅凭图片有配文,不能认定它是装饰性图片。

假设一个网页上的链接通向可下载的 PDF 格式员工手册,而且链接中只有一个文档图标。哪种替代文本最能说明链接通向哪里?

查看文章解释

答案: "员工手册(PDF)"

对于用作链接的图片,要描述它的功能或链接目标。这个选项指出了具体文档及其格式;其他选项要么只描述外观,要么没有说明链接通向哪里。

假设一个网页中有一张照片,它既不是链接,也不是按钮。在写替代文本之前,你应该先做什么?

查看文章解释

答案: 判断图片是在传达重要内容,还是用来装饰

图片的用途和上下文决定了它需要什么样的替代文本。传达信息的照片需要用文字说明关键信息;仅用于装饰的照片则使用空的替代文本。

继续探索

为眼前的选择,再找一个有用的想法。

Reframo 的全部已发布文章均可免费阅读。准备好后,随时继续探索。