深入掌握 HTML 图片 `alt` 属性：可访问性、SEO 与最佳实践（30-seconds-of-code 实践指南）-开发者社区

教程
文档

【免费下载链接】30-seconds-of-code

Coding articles to level up your development skills

项目地址：https://gitcode.com/gh_mirrors/30/30-seconds-of-code

alt属性（alternative text，替代文本）是 HTML 中每个<img>元素都应当认真对待的核心属性：当图片无法加载时，它提供文字兜底；当用户使用屏幕阅读器时，它是"看见"图片的唯一通道。本文以 30-seconds-of-code 仓库中的 image-alt.md 为基础，系统讲解alt属性的作用机制、优质替代文本的撰写规范、装饰性图片的处理方式，并结合仓库源码与相邻条目，给出可直接落地的完整实战方案。

`alt`属性的作用：图片不可见时的信息通道

根据 image-alt.md 的定义，alt属性为图片提供替代信息（alternative information），其使用场景包括：

网络连接问题：图片资源加载失败时，浏览器会在图片占位处显示alt文本，让用户仍能理解该区域原本想传达的内容；
浏览器限制：部分环境（如低带宽模式、数据节省模式）或老旧浏览器无法渲染图片；
HTTP 错误：图片返回 404 或服务器错误时，页面不能因此丢失语义信息；
屏幕阅读器用户：读屏软件会将alt文本读给视障用户，代替图片本身。

不为图片提供alt属性，将直接损害无法查看图片的用户体验。更糟糕的是，缺少alt属性时屏幕阅读器会退而读取图片的src文件名字符串，例如IMG_20210930_014257.jpg——这种对用户毫无意义、噪音极大的体验正是开发者应当避免的。

基础用法非常简洁：

<img src="image.jpg" alt="Alternative text">

仓库中 alt-vs-title.md 进一步指出：当图片无法加载时，浏览器会用alt文本替换图片展示在页面上，帮助用户理解"这里为什么有一张图片"；而title属性则是用户在鼠标悬停时看到的附加提示气泡（tooltip），二者职责不同，alt承担的是替代与无障碍语义，title只提供锦上添花的补充信息。

如何写出高质量的 alt 文本

alt文本的撰写原则是：站在"看不见图片的人"的角度，准确、简洁地描述图片。优秀的替代文本应当让用户仅凭文字就能在脑海中还原图片的核心内容。

描述要准确：替代文本必须忠实反映图片实际内容，不能夸大或臆造；
描述要简洁：部分屏幕阅读器会在125 个字符之后截断描述，因此应把关键信息放在最前面，并控制篇幅。

以一个海洋中航行的帆船图片为例，正确的写法是：

<img src="boat.jpg" alt="A boat sailing on the ocean">

这个例子的要点值得拆解：

像打电话一样描述：设想你在电话里向朋友描述这张图片，你会说"海上航行的一艘船"，而不是堆砌抽象词汇；
避免"picture / image"字样：读屏软件已经明确告知用户"这是一张图片"，在alt中重复"图片"一词属于冗余噪音；
提供足够上下文：只写alt="boat"是不够的——"船"缺乏场景信息，无法传达图片的意境；"A boat sailing on the ocean" 才给出了完整的画面语境。

仓库中 8-tips-for-accessible-websites.md 的可访问性建议与此一致：为<img>元素提供alt属性，正是为了避免屏幕阅读器去朗读src地址。这也是 WCAG（Web Content Accessibility Guidelines）对图片替代文本的基本要求。

装饰性图片：使用空 alt 属性而非省略

并非所有图片都承载信息。如果一张图片纯属装饰（purely decorative）——例如分隔线、纯背景、视觉点缀——最佳做法是保留alt属性但将其留空：

<img src="decorative.jpg" alt="">

这个写法有一个关键区别必须强调：

alt=""（空字符串）：明确告知屏幕阅读器"这张图片没有信息价值，请跳过"，读屏软件会直接忽略该图片；
省略alt属性：屏幕阅读器无法判断图片用途，会转而朗读图片的文件名（如decorative.jpg），制造无意义的听觉噪音。

因此，永远不要通过"删掉alt属性"来处理装饰性图片——留空的alt属性才是标准的无障碍做法。

这一实践在 30-seconds-of-code 仓库自身的前端代码中得到了印证。以 Header.astro 中的站点 Logo 为例，它是可点击返回首页的功能性图片，因此提供了有实际语义的替代文本：

<img fetchpriority="high" src="/assets/30s-logo.png" alt="Home" width="140" height="48" />

而在 Hero.astro 中，文章页顶部的封面图属于装饰性展示（文章标题与描述已经承载全部语义），因此采用空alt：

<img src={cover} srcset={coverSrcset} alt="" height="240" width="240" fetchpriority="high" />

同样的模式也出现在 PreviewList.astro 与 SnippetContent.astro 中。这套"功能性图片写描述、装饰性图片写空串"的取舍，正是对本文所述规范的真实生产级实践，可以直接作为你项目中的参考范式。

综合实战：alt 属性与其他图片属性的配合

将本文要点与仓库中的相邻知识结合，可以得到一套完整的<img>元素编写清单：

所有<img>都必须包含alt属性（要么承载信息，要么为空字符串）；
信息性图片：撰写准确、简洁、带上下文的描述，避免"图片"字样，控制总长不超过 125 字符；
装饰性图片：使用alt=""，让读屏软件跳过；
title属性可选：仅在需要悬停提示等附加信息时使用，不要用它替代alt（参考 alt-vs-title.md）；
性能属性不冲突：loading="lazy"等性能优化属性与alt正交，可以同时存在（参考 lazy-loading-images.md 中的示例<img src="/img/duck.png" alt="A rubber duck" loading="lazy" />）。

一个同时兼顾可访问性、SEO 与性能的完整示例：

<img src="boat.jpg" alt="A boat sailing on the ocean" width="800" height="600" loading="lazy" />

小结

alt属性是 HTML 图片可访问性的基石：它服务于加载失败、网络受限与屏幕阅读器等所有"图片不可见"的场景。信息性图片需要准确简洁、避免冗余词汇、带足上下文的描述；装饰性图片则应当使用alt=""显式声明其无信息价值，而不是省略属性。遵循这些规范，不仅能显著改善视障用户与弱网用户的体验，也是 SEO 评估与无障碍审计（WCAG）的硬性要求。将本文的写法与 30-seconds-of-code 仓库中 image-alt.md、alt-vs-title.md、8-tips-for-accessible-websites.md 三篇条目配合阅读，即可构建完整的图片无障碍知识体系。