HTML Academy · 课时

图像替代文本：何时使用及如何编写

Q: 「图像替代文本：何时使用及如何编写」这节课中我会学到什么？

为非装饰性图像编写能够传达含义的替代文本 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

为非装饰性图像编写能够传达含义的替代文本

图像替代文本：何时使用及如何编写 是 CoddyKit 上的免费 HTML Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

什么是 alt 文本？

alt 属性为图像提供替代文本：

屏幕阅读器会读取替代文本，而不是图像本身
图像加载失败时会显示替代文本
搜索引擎会将其编入索引
WCAG 合规要求提供替代文本

黄金法则

alt 文本应传达图像对于视力正常的用户所能提供的相同信息或功能：

<!-- The test: if you removed this image,
     would the alt text give you the same information? -->

<!-- BAD: not descriptive -->
<img src="chart.png" alt="Chart">

<!-- GOOD: conveys the information -->
<img src="chart.png" alt="Bar chart showing 48% revenue increase from Q1 to Q4 2024">

信息性图像

传达信息的图像应描述其内容：

<img
  src="signup-flow.png"
  alt="Five-step signup flow: Email → Profile → Plan → Payment → Confirmation"
>

<!-- Describe what the image shows, not what it is -->
<!-- BAD: 'Image of a graph' -->
<!-- GOOD: 'Line graph showing download growth from 10k to 150k per month' -->

装饰性图像：空 alt

纯装饰性图像应使用空 alt，以便跳过这些图像：

<!-- Decorative separator -->
<img src="divider.png" alt="">

<!-- Icon beside text that already describes it -->
<img src="warning-icon.svg" alt=""> <span>Payment failed</span>
<!-- The icon duplicates the adjacent text — empty alt is correct -->

<!-- Never omit alt entirely — missing alt attribute is an error
     Empty alt="" = intentionally decorative
     Missing alt = unknown, screen readers may read the filename -->

功能性图像

具有某种功能的图像应描述其功能，而不是外观：

<!-- Logo that links to home -->
<a href="/">
  <img src="logo.svg" alt="CoddyKit — Go to homepage">
</a>
<!-- Describes the destination, not the logo's appearance -->

<!-- Submit button using an image -->
<input type="image" src="submit.png" alt="Submit registration form">
<!-- Describes what happens when activated -->

复杂图像：图和长描述

复杂图表或示意图可能需要的不只是简短的 alt 文本：

<figure>
  <img
    src="complex-diagram.png"
    alt="Network architecture diagram — see the description below"
    aria-describedby="diagram-desc"
  >
  <figcaption id="diagram-desc">
    <p>The diagram shows three tiers: a client layer with browsers and mobile apps,
       a middle tier with load balancers and app servers,
       and a data tier with primary and replica databases.</p>
  </figcaption>
</figure>

文字图像

应避免使用文字图像；如果必须使用，alt 文本必须与图中文字完全一致：

<!-- Logo with text 'CoddyKit' -->
<img src="text-logo.png" alt="CoddyKit">

<!-- Promotional banner with text 'Save 50% this week only' -->
<img src="promo.jpg" alt="Save 50% this week only">

<!-- Better: use real HTML text styled with CSS
     Images of text fail at zoom and high contrast modes -->

上下文会改变 alt 文本

同一图像在不同上下文中可能需要不同的 alt 文本：

<!-- As part of an article about dogs: -->
<img src="golden.jpg" alt="Golden retriever fetching a yellow tennis ball">

<!-- As a product photo for 'Golden Retriever Dog Toy':
<img src="golden.jpg" alt="Golden retriever playing with our premium fetch toy">

<!-- As a decorative header image:
<img src="golden.jpg" alt=""> -->

alt 文本长度

alt 文本长度指南：

保持简洁——无需以“图像”或“照片”开头
尽量控制在 125 个字符以内（某些屏幕阅读器会在 125 个字符处截断）
对于复杂图像，使用简短的 alt，并通过 aria-describedby 提供扩展描述
不要堆砌关键词——应为人类读者撰写

测试 alt 文本

测试 alt 文本的方法：

在浏览器中禁用图像（Firefox：工具 → 页面样式 → 无样式）
使用 WAVE 工具一次查看所有 alt 文本
使用 VoiceOver/NVDA 听取屏幕阅读器播报的内容
运行 Lighthouse：无障碍 → 图像元素具有 [alt] 属性

SVG 与无障碍名称

对于内联 SVG，请使用不同的方式提供无障碍名称：

<!-- Standalone SVG with title: -->
<svg role="img" aria-labelledby="icon-title">
  <title id="icon-title">Settings</title>
  <!-- SVG paths -->
</svg>

<!-- Decorative SVG: -->
<svg aria-hidden="true">
  <!-- paths -->
</svg>

快速检查

纯装饰性图像应使用什么 alt 值？

回顾：alt 文本

alt 文本的要点：

始终包含 alt 属性；装饰性图像使用 alt=""
描述信息，而不是外观
功能性图像：描述操作或目标位置
复杂图像：使用简短的 alt，并通过 aria-describedby 提供完整描述
文字图像：alt 文本必须与图中文字完全一致

常见问题解答

「图像替代文本：何时使用及如何编写」课时是免费的吗？

是的 — 「图像替代文本：何时使用及如何编写」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「图像替代文本：何时使用及如何编写」这节课中我会学到什么？

为非装饰性图像编写能够传达含义的替代文本你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「图像替代文本：何时使用及如何编写」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy