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.