🖼️

画像が「情報」を持っているかどうかの判断基準、持っていない場合はalt=""を指定しよう

2024/03/11に公開

はじめに

この記事は、画像を「純粋な装飾のための画像」と見なすか、「情報を持っている画像」と見なすかの判断基準についての私見とともに、それぞれのケースでの実装についてまとめたものです。
この記事での「画像」とは実装レベルではimg要素のことを指します。

結論

  • 画像が削除されても、削除前と同様の情報量、機能を提供できる場合、その画像は純粋な装飾のための画像と考えられます。
    • 「純粋な装飾のための画像」は可能な限りCSSのbackground-imageプロパティを用いて実装する。
      • 実装上の都合によりbackground-imageによる実装が難しい場合はalt=""を指定する。
  • 画像が削除された場合に情報量や機能に損失が生じる場合、その画像は情報を持つ画像だと考えられます。
    • 「情報を持っている画像」の場合は、alt属性に視覚的な情報を伝える代替テキストを指定する。
  • 画像が情報を持っているかどうかの判断には明確な決めがあるわけではないので、ケースバイケースでデザインの意図や目的を考慮しながら判断する必要がある。

ご意見やご指摘があれば、ぜひコメントください。

純粋な装飾のための画像

画像が削除されても、削除前と同様の情報量、機能を提供できる場合、その画像は純粋な装飾のための画像と考えられます。
なのでその場合は代替テキストの指定が必須ではありません。
しかしその代わりにスクリーンリーダーなどの支援技術がその画像を無視するようにalt=""を指定する必要があります。

前提として、「純粋な装飾のための画像」は可能な限りCSSのbackground-imageプロパティを使用して実装してください。[2]

background-imageプロパティを用いての実装

例えば、後述する「例1: コンテンツの区切りを示す画像」をbackground-imageプロパティを使用して実装すると以下のようになります。

<p>ここがコンテンツの終わりです。</p>
<div class="border"></div>
.border {
  margin: 0 auto;
  height: 8px;
  width: 300px;
  background-image: url("https://example.com/img/border");
}

完全な実装はこちらのCodePenから確認できます。
https://codepen.io/wozitto/pen/GRLpaej


実装上の都合により「純粋な装飾のための画像」をimg要素で実装する必要がある場合の例を紹介していきます。

例1: コンテンツの区切りを示す画像[3]

コンテンツの区切りを示す画像が表示されているスクリーンショット

<p>ここがコンテンツの終わりです。</p>
<img src="https://example.com/img/border" alt="" />

視覚的にコンテンツを区切るためだけの画像は、スクリーンリーダーでの読み上げにおいては不要な情報なので、alt=""を指定して読み上げられないようにします。
alt属性が空(alt="" or alt)であることと、alt属性が指定されていないことは等価ではないことに注意してください。

完全な実装はこちらのCodePenから確認できます。
https://codepen.io/wozitto/pen/VwNLjdQ

また、別セクション、トピックへの移動などの段落レベルの意味的なコンテンツの区切りを表現する場合は、hr要素を使用するのが適切です。

<p>ここがコンテンツの終わりです。</p>
<hr />

完全な実装はこちらのCodePenから確認できます。
https://codepen.io/wozitto/pen/RwOaqMR

例2: 隣接するテキストによって十分な情報が与えられている場合[4]

ページが制限されていることを示す要素が表示されているスクリーンショット

<div class="banner">
  <img class="icon" src="https://example.com/img/lock" width="20" height="20" alt="" />
  <p>このページは制限されています。</p>
</div>

バナー要素で伝えたい情報は隣接するテキストで十分に説明されています。
img要素にalt属性を指定すると重複して同じ内容が二度読み上げられる恐れがあります。
なので隣接するテキストによって要素の説明が十分になされている場合はalt=""を指定してください。

完全な実装はこちらのCodePenから確認できます。
https://codepen.io/wozitto/pen/NWmqRgx

例3: ページに雰囲気を加えるためだけの画像[5]

ページに雰囲気を加えるためだけの画像が表示されているスクリーンショット

<div class="container">
  <img src="https://example.com/img/ambience" alt="" />
  <div>
    <h2>旅に出よう!</h2>
    <p>ナイフ、ランプ、かばんにつめこんで</p>
  </div>
</div>

この画像はページに雰囲気や視覚的なイメージを加えるためだけに使用されています。
このような画像も一般的にはalt=""の対象です。
しかし、ページに雰囲気を加えるための画像が単に装飾的な役割を果たすのか、それとも何らかの「情報」を伝える役割を持つのかは、デザインの意図やそのページの意図によります。
例えば、後に示す「例3: ブランドイメージを伝える画像」においてのブランドイメージを強調するための画像は、ページに雰囲気を加えるという装飾的な役割を果たしつつも、同時に「ブランドイメージに関する情報」を伝えるための役割も持っています。
このように画像が情報を持っているかどうかの判断には明確な決めがあるわけではないので、ケースバイケースで実装の意図や目的を考慮しながら判断する必要があります。

完全な実装はこちらのCodePenから確認できます。
https://codepen.io/wozitto/pen/ZEZGNoq

情報を持つ画像

画像が削除された場合に情報量や機能に損失が生じる場合、その画像は情報を持つ画像だと言えます。
この場合はスクリーンリーダーなどの支援技術に画像の持つ情報を伝達するために、alt属性に代替テキストを指定する必要があります。

例1: ホームリンクのロゴ

ホームリンクが表示されているスクリーンショット

<header>
  <a href="">
    <img src="https://example.com/img/logo" alt="wozitto ホーム" />
  </a>
</header>

リンクのロゴには、リンクをクリック後どこのページに遷移するのかを示すために、alt属性を指定する必要があります。

完全な実装はこちらのCodePenから確認できます。
https://codepen.io/wozitto/pen/ExJVwPp

例2: ラベルとしての働きを持つアイコン[6]

電話番号が表示されているスクリーンショット

<p>
  <img src="https://example.com/img/phone" alt="電話番号:"> 0123 456 7890
</p>

この例では、画像の後に電話番号が続いています。
視覚的な情報と同じ情報を与えるためにalt属性に「電話番号:」という代替テキストを指定すると良いです。

完全な実装はこちらのCodePenから確認できます。
https://codepen.io/wozitto/pen/MWRaEJQ

例3: ブランドイメージを伝える画像[7]

暖かい印象が表示されているスクリーンショット

<img src="https://example.com/img/family-frendly" alt="私たちの会社はファミリー・フレンドリーです。">

この例では、暖かい印象を加える画像を使用して、会社がファミリー・フレンドリーであるというブランドイメージを伝えています。
このようにブランドイメージなどのために意図的な印象を加える画像を使用する場合は、alt属性に意図する印象を表現する代替テキストを指定する必要があります。

完全な実装はこちらのCodePenから確認できます。
https://codepen.io/wozitto/pen/ExJVwbG

まとめ

  • 画像が削除されても、削除前と同様の情報量、機能を提供できる場合、その画像は純粋な装飾のための画像と考えられます。
    • 「純粋な装飾のための画像」は可能な限りCSSのbackground-imageプロパティを用いて実装する。
      • 実装上の都合によりbackground-imageによる実装が難しい場合はalt=""を指定する。
  • 画像が削除された場合に情報量や機能に損失が生じる場合、その画像は情報を持つ画像だと考えられます。
    • 「情報を持っている画像」の場合は、alt属性に視覚的な情報を伝える代替テキストを指定する。
  • 画像が情報を持っているかどうかの判断には明確な決めがあるわけではないので、ケースバイケースでデザインの意図や目的を考慮しながら判断する必要がある。

ご意見やご指摘があれば、ぜひコメントください。

関連URL

脚注
  1. https://www.w3.org/WAI/tutorials/images/decorative/#:~:text=Screen readers also allow the use of WAI-ARIA to hide elements by using role%3D"presentation". However%2C currently%2C this feature is not as widely supported as using a null alt attribute ↩︎

  2. https://www.w3.org/WAI/tutorials/images/decorative/#:~:text=Where possible%2C decorative images should be provided using CSS background images instead. ↩︎

  3. https://www.w3.org/WAI/tutorials/images/decorative/#:~:text=ambiance (eye-candy)-,Example 1%3A Image used as part of page design,-This image is ↩︎

  4. https://www.w3.org/WAI/tutorials/images/decorative/#:~:text=strong> </a>-,Example 3%3A Image with adjacent text alternative,-This picture of ↩︎

  5. https://www.w3.org/WAI/tutorials/images/decorative/#:~:text=... </p>-,Example 4%3A Image used for ambiance (eye-candy),-This image is ↩︎

  6. https://www.w3.org/WAI/tutorials/images/informative/#:~:text=conveying file format-,Example 1%3A Images used to label other information,-This example shows ↩︎

  7. https://www.w3.org/WAI/tutorials/images/informative/#:~:text=detailed alternative text.-,Example 4%3A Images conveying an impression or emotion,-This photograph shows ↩︎

Money Forward Developers

Discussion