这是什么
alt 文本是附加在页面代码中图片上的一段简短书面描述,屏幕阅读器会把它朗读出来代替图片本身,因为使用屏幕阅读器的盲人或视力低下访客无法直接看到图片。我们那篇专注于 SEO 的 alt 文本指南关注的是同一个属性如何帮助搜索引擎发现图片,而这个角度则专门关注 alt 文本对一个真正依赖它来获取信息的人意味着什么——这些信息正是视力正常的访客只需看一眼图片就能获得的。
这个区别在实践中很重要:纯粹为了在图片搜索中排名而写的 alt 文本,最终可能被塞满关键词,而不是真正描述图片显示的内容,这对屏幕阅读器用户来说效果很差,即使它在技术上满足了要求的字面规定。
为什么重要
对屏幕阅读器用户来说,一张没有 alt 文本的图片,要么被完全跳过(就像它不存在一样),要么被朗读成一个毫无帮助的文件名,比如「IMG_4821.jpg」——无论哪种情况,那张图片本应传达给视力正常访客的信息,都直接丢失了。当图片承载着有意义的内容时,这就成为一个严重的障碍:一张带数据的图表、一张解释流程的示意图、一张展示了周围文字中未描述过的功能的产品照片。
在许多情境下,这也是一项法律上的无障碍要求,依据的是 WCAG(网页内容无障碍指南)这样许多企业必须遵守的标准——但如果纯粹把它当作一个合规打勾项来对待,就会忽略它其实解决的是真实访客日常真实存在的访问问题这一要点。
如何解决
- 为每一张传达真实信息的图片写 alt 文本,描述它实际显示的内容,就像在向一个看不见它的人打电话描述一样。
- 保持描述简洁、具体——通常一句话或一个短语就够了;避免重复周围文字中已经提供过的信息。
- 对于不添加任何信息、纯装饰性的图片(背景纹理、分隔线),使用一个空的
alt="",让屏幕阅读器完全跳过它们,而不是朗读出一些没有意义的东西。 - 对于本身就是链接的图片(比如链接到首页的徽标),alt 文本要描述这个链接指向哪里,而不仅仅是图片长什么样。
- 用免费的屏幕阅读器(NVDA、VoiceOver)测试,实际听听你的图片是如何被朗读出来的,而不是假设你写的文字朗读出来效果一定好。