alt 是替代而不是描述

一句话总结

alt 中该写什么，不取决于图片画的是什么，而取决于这张图片在这个位置上起什么作用。所以同一张照片，放在不同的位置，答案也不同。

为什么需要它

“给图片加上 alt”是人人皆知的规则，所以大多数时候确实会加。问题在于加什么。实际工作中真正看到的是这样的：

alt="이미지"
alt="banner_2024_final_v3.png"
alt="빨간 등산 배낭 45리터 제품 상세 페이지 바로가기 클릭"

第一个什么信息也没有告诉用户，第二个读出了文件名，第三个长到没法在列表中挑选。这三个都能通过“有没有加 alt”的检查。

而且，反方向的事故更常发生。给装饰性图片加上了说明，导致在朗读页面的过程中不断插进毫无意义的声音。一个页面里有二十张分隔线图片，全都被读作“线条装饰”，这样的页面本身就没法用了。

工作原理——判断取决于位置

W3C 的图片决策树 把这个判断整理成了几个问题。只摘录核心内容如下。

这张图片的作用	alt 中该写什么
传达内容	简短地写出那段内容
位于链接或按钮内	不是图片，而是该链接的目的
旁边已经有相同的说明	alt=""——读两遍会造成干扰
纯装饰	alt=""
是用文字画出的图片	原样写出那些文字
是图表或示意图	一句话要点 + 在正文中给出实际数值

这里必须区分两件事。

不写 alt 属性与写成 alt="" 是不同的。没有这个属性时，屏幕阅读器会认为没有可以替代的内容，从而读出文件名（IMG_20240103.jpg）。空字符串是“没有需要读的内容”的明确声明，所以会被悄悄跳过。装饰性图片必须写上空的 alt。

而且链接中的图片尤其容易写错。<a href="/"><img src="logo.svg" alt="회사 로고"></a>（韩文，意为“公司徽标”）会被读作“公司徽标 链接”。这个链接要去哪里，哪里都没有说。这里的 alt 不是图片的说明，而是链接的名称，所以应该写 alt="홈으로"（韩文，意为“前往首页”）。

figure 与 figcaption

figcaption 不是 alt 的替代品。两者的读者不同。

• alt——替看不到图片的人，代替图片给出的内容
• figcaption——所有人都能看到的说明。出处、拍摄时间、图片编号

所以如果在两处写同样的句子，屏幕阅读器用户就会把同一句话听两遍。如果说明文字中已经写全了内容，把 alt="" 留空会更好。

表格是承载关系的容器

阅读表格的方式与阅读段落完全不同。屏幕阅读器在单元格之间移动时，会一并读出该单元格属于哪一行、哪一列。建立这种关联的，就是 th 和 scope。

<table>
  <caption>월별 매출</caption>
  <thead>
    <tr><th scope="col">월</th><th scope="col">매출</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">1월</th><td>1,200</td></tr>
  </tbody>
</table>

有 scope 时，会读作“1 月、销售额、1200”。没有的话，就只会一个接一个地读数字，在十列的表格里，根本无从知道现在看到的数字是什么。W3C 的表格教程 甚至讲到了表头有两层的复杂表格——这类表格要用 headers 和 id 为每个单元格写明关联。

caption 是表格的标题。当页面上有多个表格时，可以在列表中浏览并挑选。

不要用表格做布局。 如果声明了行与列的关系，实际上却没有这种关系，屏幕阅读器就会读出根本不存在的结构。

在现场相遇的样子

自动检查工具能完美地发现 alt 有没有，却无法判断内容对不对。所以 alt="이미지"（韩文，意为“图片”）能通过所有工具的检查。这个判断必须由人来做，而必须由人来做的判断，在创建的那一刻去做最省成本。

实际工作中效果最好的，不是增加规则，而是把问题缩减为一个。

如果这张图片没有显示，这个位置应该有什么文字？

对这个问题，如果是装饰性的，自然会得出“什么都不需要”的答案；如果在链接里，自然会得出“要去哪里”。描述图片的冲动也会自然而然地被压下去。

而且，如果使用内容管理系统，允许在上传界面把 alt 留空，同时提供“这是装饰图”复选框，效果很好。如果设为必填来强行阻止，人们就会填一个空格蒙混过去。

下一项测验要确认什么

会确认同一张图片会随位置而怎样变化、alt="" 与缺失属性的区别、与 figcaption 的分工，以及 scope 在表格中起的作用。