1. Web
  2. Web API
  3. HTMLImageElement
  4. alt

HTMLImageElement: alt 属性

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

HTMLImageElement 的 alt 属性提供了备用（替代）文本，用于在 <img> 元素指定的图像未加载时显示。

这可能是因为发生错误，用户禁用了图像加载，或者图像尚未加载完成。

使用 alt 属性最重要的原因可能是为了支持 可访问性，因为 alt 文本可能会被屏幕阅读器和其他辅助技术使用，以帮助残障人士充分利用您的内容。例如，它会被大声朗读或发送到盲文输出设备，以支持失明或视力障碍的用户。

可以这样理解： 在为图像选择 alt 字符串时，想象一下当你通过电话向某人朗读页面时，在不提及页面上有图像的情况下，你会说些什么。

替代文本会显示在图像原本会占据的空间中，并且应该能够替代图像而不改变页面的含义。

值

一个包含替代文本的字符串，用于在图像未加载时显示，或供辅助设备使用。

alt 属性在技术上是必需的；它应该始终被指定。如果图像不需要备用文本（例如，图像是装饰性的，或者是一个重要性极低的指示图标），您可以指定一个空字符串 ("")。出于兼容性原因，浏览器通常会接受没有 alt 属性的图像，但您应该养成使用它的习惯。

用法说明

alt 属性的基本准则是，每个图像的替代文本都应该能够在不改变页面含义的情况下替换图像。您绝不应将 alt 用于可能被解释为标题或副标题的文本。有单独的属性和元素为此目的而设计。

示例

除此之外，根据图像的使用方式，还有其他关于如何恰当使用 alt 的附加指南。这些将在下面的示例中展示。

装饰性图像

没有语义含义的图像——例如仅用于装饰或信息价值有限的图像——应将其 alt 属性设置为空字符串 ("")。下面的示例展示了这一点。

HTML

在此示例的 HTML 中（如下所示），<img> 元素包含 alt 属性，这将阻止图像具有任何替代文本，因为它是一个装饰性细节。

html
<div class="container">
  <div class="left-margin">
    <img src="margin-flourish.svg" alt="" />
  </div>
  <div class="contents">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis orci
      ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac
      neque libero. Vivamus consectetur rhoncus elit eget porta. Etiam pulvinar
      ex id sapien laoreet, quis aliquet odio lobortis. Nam ac mauris at risus
      laoreet cursus vitae et sapien. Etiam molestie auctor eros, ac porta risus
      scelerisque sit amet. Ut nunc neque, porta eu auctor at, tempor et arcu.
    </p>
  </div>
</div>

CSS

此示例的 CSS 设置了布局样式，如下面的结果所示。

css
body {
  margin: 0;
  padding: 0;
}

p {
  margin-block-start: 0;
  margin-block-end: 1em;
  margin-top: 0;
  margin-bottom: 1em;
}

.container {
  width: 100vh;
  height: 95vh;
  font:
    16px "Helvetica",
    "Arial",
    sans-serif;
}

.left-margin {
  background-color: rgb(241 240 237);
  width: 9em;
  height: 100%;
  float: left;
  margin-right: 5px;
  padding-right: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-margin img {
  width: 6em;
}

.contents {
  background-color: rgb(241 240 235);
  height: 100%;
  margin-left: 2em;
  padding-top: 1em;
  padding-left: 2em;
  padding-right: 1em;
}

结果

用作按钮的图像

当使用图像作为按钮时（通过将其作为代表超链接的 <a> 元素的唯一可见子元素），必须使用 alt 属性来传达按钮的用途。换句话说，它应该是您在文本按钮中用于相同目的的文本。

例如，在下面的 HTML 片段中，一个使用图标图像作为链接标签的工具栏为每个图标提供了 alt 属性，当图标无法使用或故意不使用时，提供一个文本标签来代替图标。

html
<li class="toolbar" role="toolbar">
  <a href="songs.html" role="button">
    <img src="songicon.svg" alt="Songs" />
  </a>
  <a href="albums.html" role="button">
    <img src="albumicon.svg" alt="Albums"
  /></a>
  <a href="artists.html" role="button">
    <img src="artisticon.svg" alt="Artists" />
  </a>
  <a href="playlists.html" role="button">
    <img src="playlisticon.svg" alt="Playlists" />
  </a>
</li>

包含图表或地图的图像

当图像包含以图表、统计图、图形或地图形式呈现的信息时，alt 文本应至少以摘要形式提供相同的信息。这适用于位图格式（如 PNG 或 JPEG）或矢量格式（如 SVG）的图像。

  • 对于地图，alt 文本可以是到地图指示地点的方向，类似于您口头解释它的方式。
  • 对于图表，文本可以描述图表中的项目及其数值。
  • 对于图形，文本可以是图表所呈现概念的解释。

请记住，以 SVG 格式显示的图表和图形中包含的任何文本都可能被屏幕阅读器读取。这可能会影响您为图形编写 alt 文本时所做的决定。

图标或徽标

徽标（如公司或品牌徽标）和信息图标应在其 alt 字符串中使用相应的文本。也就是说，如果图像是公司徽标，alt 文本应该是公司的名称。如果图像是代表状态或其他信息的图标，文本应该是该状态的名称。

例如，如果一个图像是一个徽章，在页面上显示以表明页面内容是新的并且最近已更新，则相应的 alt 文本可能是 "最近更新" 甚至 "2019 年 8 月 27 日更新"。

在此示例中，使用一个带有 "New!" 字样的星形爆炸图像来指示文章是关于新内容（并且可能令人兴奋）的。alt 属性设置为 New Page!，以便在图像不可用时，可以使用该文本代替图像显示。屏幕阅读器也可以读取它。

HTML

下面的 HTML 创建了一个网站内容的片段，该网站使用了描述的图标。请注意 <img> 上的 alt 属性的使用，它提供了一个良好的替换字符串，以防图像加载失败。

html
<div class="container">
  <img
    src="https://www.bitstampede.com/mdn-test/new-page.svg"
    alt="New Page!"
    class="page-info-badge" />
  <p class="contents">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis orci
    ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac neque
    libero. Vivamus consectetur rhoncus elit eget porta. Etiam pulvinar ex id
    sapien laoreet, quis aliquet odio lobortis. Nam ac mauris at risus laoreet
    cursus vitae et sapien. Etiam molestie auctor eros, ac porta risus
    scelerisque sit amet. Ut nunc neque, porta eu auctor at, tempor et arcu.
  </p>
</div>

CSS

这里的 CSS 主要特点是使用了 clip-path 和 shape-outside 来将文本以吸引人的方式环绕在图标周围。

css
.container {
  max-width: 500px;
}

.page-info-badge {
  width: 9em;
  padding-right: 1em;
  float: left;
  clip-path: polygon(
    100% 0,
    100% 50%,
    90% 70%,
    80% 80%,
    70% 90%,
    50% 100%,
    0 100%,
    0 0
  );
  shape-outside: polygon(
    100% 0,
    100% 50%,
    90% 70%,
    80% 80%,
    70% 90%,
    50% 100%,
    0 100%,
    0 0
  );
}

.contents {
  margin-top: 1em;
  font:
    16px "Helvetica",
    "Arial",
    sans-serif;
}

结果

其他图像

显示物体或场景的图像应具有描述图像中可见内容的 alt 文本。一张黄色茶壶的照片可能在其 alt 属性中字面上设置为 "A yellow teapot"。

规范

规范
HTML
# dom-img-alt

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者 修改。

在 GitHub 上查看此页面 • 报告此内容的麻烦
© . Content available under a Creative Commons license.