はじめに
この記事は、画像を「純粋な装飾のための画像」と見なすか、「情報を持っている画像」と見なすかの判断基準についての私見とともに、それぞれのケースでの実装についてまとめたものです。
この記事での「画像」とは実装レベルではimg要素のことを指します。
結論
- 画像が削除されても、削除前と同様の情報量、機能を提供できる場合、その画像は純粋な装飾のための画像と考えられます。
- 「純粋な装飾のための画像」は可能な限りCSSのbackground-imageプロパティを用いて実装する。
- 実装上の都合により
background-imageによる実装が難しい場合はalt=""を指定する。
- 実装上の都合により
- 「純粋な装飾のための画像」は可能な限りCSSのbackground-imageプロパティを用いて実装する。
- 画像が削除された場合に情報量や機能に損失が生じる場合、その画像は情報を持つ画像だと考えられます。
- 「情報を持っている画像」の場合は、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から確認できます。
実装上の都合により「純粋な装飾のための画像」をimg要素で実装する必要がある場合の例を紹介していきます。
例1: コンテンツの区切りを示す画像[3]
<p>ここがコンテンツの終わりです。</p>
<img src="https://example.com/img/border" alt="" />
視覚的にコンテンツを区切るためだけの画像は、スクリーンリーダーでの読み上げにおいては不要な情報なので、alt=""を指定して読み上げられないようにします。
alt属性が空(alt="" or alt)であることと、alt属性が指定されていないことは等価ではないことに注意してください。
完全な実装はこちらのCodePenから確認できます。
また、別セクション、トピックへの移動などの段落レベルの意味的なコンテンツの区切りを表現する場合は、hr要素を使用するのが適切です。
<p>ここがコンテンツの終わりです。</p>
<hr />
完全な実装はこちらのCodePenから確認できます。
例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から確認できます。
例3: ページに雰囲気を加えるためだけの画像[5]
<div class="container">
<img src="https://example.com/img/ambience" alt="" />
<div>
<h2>旅に出よう！</h2>
<p>ナイフ、ランプ、かばんにつめこんで</p>
</div>
</div>
この画像はページに雰囲気や視覚的なイメージを加えるためだけに使用されています。
このような画像も一般的にはalt=""の対象です。
しかし、ページに雰囲気を加えるための画像が単に装飾的な役割を果たすのか、それとも何らかの「情報」を伝える役割を持つのかは、デザインの意図やそのページの意図によります。
例えば、後に示す「例3: ブランドイメージを伝える画像」においてのブランドイメージを強調するための画像は、ページに雰囲気を加えるという装飾的な役割を果たしつつも、同時に「ブランドイメージに関する情報」を伝えるための役割も持っています。
このように画像が情報を持っているかどうかの判断には明確な決めがあるわけではないので、ケースバイケースで実装の意図や目的を考慮しながら判断する必要があります。
完全な実装はこちらのCodePenから確認できます。
情報を持つ画像
画像が削除された場合に情報量や機能に損失が生じる場合、その画像は情報を持つ画像だと言えます。
この場合はスクリーンリーダーなどの支援技術に画像の持つ情報を伝達するために、alt属性に代替テキストを指定する必要があります。
例1: ホームリンクのロゴ
<header>
<a href="">
<img src="https://example.com/img/logo" alt="wozitto ホーム" />
</a>
</header>
リンクのロゴには、リンクをクリック後どこのページに遷移するのかを示すために、alt属性を指定する必要があります。
完全な実装はこちらのCodePenから確認できます。
例2: ラベルとしての働きを持つアイコン[6]
<p>
<img src="https://example.com/img/phone" alt="電話番号:"> 0123 456 7890
</p>
この例では、画像の後に電話番号が続いています。
視覚的な情報と同じ情報を与えるためにalt属性に「電話番号:」という代替テキストを指定すると良いです。
完全な実装はこちらのCodePenから確認できます。
例3: ブランドイメージを伝える画像[7]
<img src="https://example.com/img/family-frendly" alt="私たちの会社はファミリー・フレンドリーです。">
この例では、暖かい印象を加える画像を使用して、会社がファミリー・フレンドリーであるというブランドイメージを伝えています。
このようにブランドイメージなどのために意図的な印象を加える画像を使用する場合は、alt属性に意図する印象を表現する代替テキストを指定する必要があります。
完全な実装はこちらのCodePenから確認できます。
まとめ
- 画像が削除されても、削除前と同様の情報量、機能を提供できる場合、その画像は純粋な装飾のための画像と考えられます。
- 「純粋な装飾のための画像」は可能な限りCSSのbackground-imageプロパティを用いて実装する。
- 実装上の都合により
background-imageによる実装が難しい場合はalt=""を指定する。
- 実装上の都合により
- 「純粋な装飾のための画像」は可能な限りCSSのbackground-imageプロパティを用いて実装する。
- 画像が削除された場合に情報量や機能に損失が生じる場合、その画像は情報を持つ画像だと考えられます。
- 「情報を持っている画像」の場合は、alt属性に視覚的な情報を伝える代替テキストを指定する。
- 画像が情報を持っているかどうかの判断には明確な決めがあるわけではないので、ケースバイケースでデザインの意図や目的を考慮しながら判断する必要がある。
ご意見やご指摘があれば、ぜひコメントください。
関連URL
- Decorative Images | Web Accessibility Initiative (WAI) | W3C
- Informative Images | Web Accessibility Initiative (WAI) | W3C
- H2: Combining adjacent image and text links for the same resource | Techniques for WCAG 2.0
- H67: Using null alt text and no title attribute on img elements for images that AT should ignore | Techniques for WCAG 2.0
- When can a web author use null alt text alt="" to make an image conform to WCAG? - David MacDonald Web Accessibility Blog, testing, teaching, and discussion
Discussion