HTMLImageElement: alt 属性

基线广泛可用

此功能已完善，可在许多设备和浏览器版本中使用。它自 2015 年 7 月.

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

这可能是由于错误、用户已禁用图像加载或图像尚未完成加载所致。

使用 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 Arial,
    Helvetica,
    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" aria-role="toolbar">
  <a href="songs.html" aria-role="button">
    <img src="songicon.svg" alt="Songs" />
  </a>
  <a href="albums.html" aria-role="button">
    <img src="albumicon.svg" alt="Albums"
  /></a>
  <a href="artists.html" aria-role="button">
    <img src="artisticon.svg" alt="Artists" />
  </a>
  <a href="playlists.html" aria-role="button">
    <img src="playlisticon.svg" alt="Playlists" />
  </a>
</li>

包含图表或地图的图像

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

对于地图，alt 文本可以是地图指示位置的路线，类似于您在口头解释时的方式。
对于图表，文本可以描述图表中的项目及其值。
对于图表，文本可以解释图表呈现的概念。

请记住，屏幕阅读器可能会读取以 SVG 格式呈现的图表和图表中包含的任何文本。这可能会影响您在编写图表 alt 文本时的决策。

图标或徽标

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

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

在这个例子中，一个带有“新！”字样的星形图像用来表示文章的内容是新的（并且可能也被认为是令人兴奋的）。alt 属性被设置为 新页面！，以便在图像不可用时显示该文本以替代图像。它还可以被屏幕阅读器读取。

HTML

以下 HTML 代码使用描述的图标创建了来自网站的内容片段。请注意使用 alt 属性在 <img> 上，提供了在图像无法加载时使用的良好替代字符串。

html

<div class="container">
  <img
    src="https://www.bitstampede.com/mdn-test/new-page.svg"
    alt="New Page!"
    class="pageinfo-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;
}

.pageinfo-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 Arial,
    Helvetica,
    Verdana,
    sans-serif;
}

结果

其他图像

显示物体或场景的图像应该具有描述图像内容的 alt 文本。一张黄色茶壶的照片的 alt 属性可能被设置为“一个黄色茶壶”。

规范

规范
HTML 标准 # dom-img-alt

浏览器兼容性

BCD 表格仅在浏览器中加载