思维模型
图片替代文本
根据图片在页面中的用途,用文字传达它的关键信息或功能。
探索一下
替代文本用文字传达图片的信息或功能。屏幕阅读器可以把这些文字转换成语音或盲文。在写替代文本之前,你应该先确定什么?
选择第一步
学会根据图片的用途选择替代文本。
理解概念
理解概念
替代文本用文字传达图片的信息或功能。屏幕阅读器可以把这些文字转换成语音或盲文。具体该怎么写,要看图片为什么出现在页面上。选一张图片,想想它为页面提供了什么。
详细讲解
详细讲解
先判断图片是在传达重要信息、承担某种功能,还是仅仅用来装饰。对于传达信息的图片,用简短的描述说明关键信息。哪些细节重要,要看上下文:WAI 解释说,相比介绍公园的网站,介绍鸟类的网站可能更需要准确描述鸟的外观。图片教程
对于用作链接或按钮的功能性图片,要描述链接的目标或按钮的操作。假设一个链接通向 PDF 格式的员工手册,而且链接中只有一个文档图标。PDF 是一种文档文件格式。“员工手册(PDF)”比“PDF 文档图标”更清楚地说明了链接通向哪里,后者只是在描述图标的外观。
如果图片的唯一用途是视觉装饰,就为它提供空的替代文本。在页面代码中,alt 属性用来提供图片的替代文本;alt="" 表示它的值为空。假设一篇旅行博客中的日落照片只用来装饰,就应使用这个空值。仅凭图片有配文,不能认定它是装饰性图片:你需要先判断,它是否提供了对理解页面很重要的信息。
并非每张图片都能用简短描述交代清楚。对于图表、示意图等复杂图片,要用文字完整传达其中的数据或详细信息。WAI 还建议,除标志外,应避免把供人阅读的文字放在图片中;如果使用了包含文字的图片,替代文本应包含相同的文字。做出这些决定,需要作者了解图片的用途、上下文和内容。这份教程提供的是实现指导,并非实验证据,也不能保证符合法律要求。图片教程
研究依据
研究依据
适用局限
适用局限
所提供的来源是官方实现指导,并非衡量导航、理解或行为效果的实验。它不能证明这些做法普遍有益,也不能保证符合法律要求。其中对图片类别的概述,不应被当作 WCAG(《Web 内容无障碍指南》)的完整要求。
所提供的证据无法核实旧版中的“Henry 等人(2014)”引用及其声称的导航效果,因此这些内容已被移除。现在改用 WAI 的《图片教程》作为指导来源。此前为该教程标注的 2024 年也已移除;所提供的参考文献将其年份记为未知。员工手册和日落照片的例子,都是对这份指导的假设性应用。
参考来源
参考来源
- [1] 图片教程W3C Web Accessibility Initiative
试一试
检验你的理解
假设一篇旅行博客中的海滩日落照片仅用于视觉装饰,没有提供对理解页面很重要的信息。哪种替代文本符合 WAI 的指导?
查看文章解释
答案: ""(空的 alt 属性)
WAI 建议,当图片的唯一用途是装饰时,应使用空的替代文本。题目中说明的用途决定了答案;仅凭图片有配文,不能认定它是装饰性图片。
假设一个网页上的链接通向可下载的 PDF 格式员工手册,而且链接中只有一个文档图标。哪种替代文本最能说明链接通向哪里?
查看文章解释
答案: "员工手册(PDF)"
对于用作链接的图片,要描述它的功能或链接目标。这个选项指出了具体文档及其格式;其他选项要么只描述外观,要么没有说明链接通向哪里。
假设一个网页中有一张照片,它既不是链接,也不是按钮。在写替代文本之前,你应该先做什么?
查看文章解释
答案: 判断图片是在传达重要内容,还是用来装饰
图片的用途和上下文决定了它需要什么样的替代文本。传达信息的照片需要用文字说明关键信息;仅用于装饰的照片则使用空的替代文本。
继续探索
为眼前的选择,再找一个有用的想法。
Reframo 的全部已发布文章均可免费阅读。准备好后,随时继续探索。