32. alt 文本与可访问性

alt 可不仅仅是个”备胎”。它是很多用户了解图片内容的唯一途径。

什么时候详细描述

内容性图片：承载信息的图片，需要在 alt 里传达相同信息。

<img src="chart.png" alt="2026年第一季度销售额同比增长 23%" />

图片想表达什么，alt 就写什么。让不看图片的人也能获得同等信息。

好的 alt 写法

• 简洁，一般不超过一两句话
• 描述图片传达了什么信息，而不是外观细节
• 避免”图片：“或”图为：“这种前缀——屏幕阅读器已经在读 alt 了

<!-- 好 -->
<img src="team.jpg" alt="研发团队在办公室讨论方案" />

<!-- 不够好 -->
<img src="team.jpg" alt="一张团队的照片" />

什么时候留空 alt

装饰性图片：纯美化、不传达有用信息，应该写 alt=""。

<img src="divider-line.png" alt="" />
<img src="bg-pattern.svg" alt="" />

屏幕阅读器遇到 alt="" 会直接跳过，不浪费时间。

常见的装饰性图片：

• 背景纹理和图案
• 分割线、装饰图标
• 和正文重复的配图（信息已经在文字里了）

图片是链接时

图片嵌在 <a> 标签里，alt 描述的是链接目标。

<a href="products.html">
  <img src="cart-icon.png" alt="查看购物车" />
</a>

屏幕阅读器会读成”链接：查看购物车”。如果 alt 写”购物车图标”，用户就点进去不知道会发生什么。

文字不要放进图片

把文字做成图片是老做法。问题很多：

• 不能复制粘贴
• 搜索引擎读不到
• 放大后会模糊

如果确实必须（比如特殊字体 logo），把文字放进 alt：

<img src="welcome-banner.jpg" alt="欢迎来到码上学" />

复杂图表的处理

简单的图表可以在 alt 里概括。复杂的图表（比如详细数据可视化）alt 写不下，需要两步：

1. alt 写简短概述
2. 在正文或链接里提供详细数据表

<figure>
  <img
    src="sales-chart.png"
    alt="季度销售趋势图，详细数据见下方表格" />
  <figcaption>图 1：季度销售趋势</figcaption>
</figure>

<!-- 下面是详细的表格数据 -->
<table>
  <!-- ... -->
</table>

测试你的 alt 文本

一个简单方法：把图片路径故意写错，让图片加载失败。

<img src="this-file-does-not-exist.jpg" alt="一只猫" />

页面上显示的是 alt 文本。如果显示的是空白的、无意义的、或者和上下文脱节的文字，说明 alt 写得不合适。

也可以直接用浏览器开发者工具查看图片元素的 alt 属性。

alt 文本速查

图片类型	alt 写法
传达信息的图片	描述图片内容/传达的信息
装饰性图片	alt=""（留空）
链接中的图片	描述链接目标，不是图片外观
文字图片	写图片里的文字内容
复杂图表	概述 + 正文/链接提供详情

下节学习图片格式的选择——JPEG、PNG、WebP 各有什么特点。