altの指定の仕方
はじめに
画像の代替テキストの書き方に曖昧な部分が多かったので、W3Cの公式の文書を読めば代替テキストに対する正しい理解を得られるのではと思った次第です。
そもそも、imgタグの扱いに関してざっとまとめようと思っていたのですが、alt（代替テキスト）だけでも十分すぎる内容の量になりそうだったので、今回はaltについてフォーカスした内容にしました。
（WAI-ARIAにも触れて深掘りするべきかと思いましたが、とても広い概念になるので、今回はテーマを絞っています。）
なお、本記事はW3CのImages Tutorialの内容を簡単にまとめた内容になります。（そこそこ端折ってます）
気になったら全文目を通していただければと思います。
W3C Images Tutorial
ざっくりまとめ
- 扱う画像の種類によって、altの内容は異なってくる。
- 冗長且つ重複する内容は避ける。
- 機能的価値を提供する場合はその内容を必ず明記する。
- 意図して値を空にするのは全然OK。（寧ろそうしないといけないケースが割とある）
alt について
altとは
代替テキストのことを指す。
▶︎ 画像が持つテキスト情報のこと。視覚的な情報だけでなく、実際にテキストとして画像に情報を持たせられる仕組み。
なぜ必要なのか
- Webサイト上で使用する画像がなんらかの理由で表示できない際に、代わりにテキストで画像を表現する情報を明示できるようにするため。
- 身体に障害を持った人にもWebサイトの情報を正しく理解してもらえるようにするため。
- スクリーンリーダー（音声読み上げソフト）を使っている人
- 音声入力ソフトを使っている人
- 音声入力対応のWebサイトを閲覧している人
- 検索エンジン最適化のため
altの指定の仕方
altの付け方は扱う画像によって異なってくる。
主に下記の画像分類によって指定の仕方が変わる。
-
情報画像
- 概念と情報を視覚的に表現する画像。
-
機能画像
- ページに視覚的な装飾を追加することを目的とした画像
-
テキスト画像
- 読み取り可能なテキストを画像として表現すしたもの
-
複雑な画像
- グラフや図などの複雑な画像
-
集合画像
- 複数の画像で作られた一つの画像
-
画像マップ
- 画像の中で複数のクリッカブルな領域を含む画像
情報画像
▶︎ テキスト内容に追加で、視覚的な情報を付加するために使用されるもの。
通常の文字通りの説明ではなく、画像でしか伝えられない情報を明記する必要がある。
また、短く簡潔でなければならない。
例： 他の情報を補足するために使用される画像
新機種は防水にも対応。水にも強いスマートフォンを実現。
【実装例】
<p>
<img src="dog.jpg" alt="水に濡れたスマートフォン。">
新機種は防水にも対応。水にも強いスマートフォンを実現。
</p>
装飾画像
▶︎ ページのコンテンツに情報を追加せず、あくまで視覚的な情報をより充実させるために使われる画像。
サイトの利用者に言語情報を提供する必要がない + 支援技術での読み上げをおこなわないようにするためにも、altの値は空にする必要がある。
（alt属性は欠かしてはならない。一部のスクリーンリーダーではalt属性が全く設置されていない場合は、代わりに画像のファイル名をそのままアナウンスするため。）
例：
<img src="bg_border.jpeg" alt="">
機能画像
▶︎ サイトを利用する上での機能を提供するために使われる。ここでいう機能とは、リンク・ボタンなどのユーザーに利用してもらうアクションを指す。
ここでの代替テキストは画像の説明ではなく、発生するアクションの内容を伝える必要がある。
altが設置されていない、もしくはaltの値が空の場合はスクリーンリーダーを使用する人に対して、その画像がどんな機能を有しているのかを伝えることができない。
（ユーザーにとって重大な問題になるので、この場合では一般にaltの内容を欠かしてはならない。ただし例外な場合を除く『リンクテキスト内の情報を伝えるアイコン画像』より）
例： リンク機能を持つ単一のロゴ画像
<a href="#">
<img src="abc_company.png" alt="ABC Company ホーム">
</a>
例： リンクテキスト内の情報を伝えるアイコン画像
<a href="#">
<img src="abc_company.png" alt="">
ABC Company ホーム
</a>
▶︎ 原則、altとテキストの内容が繰り返し重複して明示されているのは好ましいといえないので、
テキストと代替テキストの内容が変わらない場合は、値を空にすることを許容する。
テキスト画像
▶︎ テキスト情報を読ませたいが画像を使わせざるを得ない場合などに使用する画像。
例： 装飾効果のあるテキスト
<img src="text_02.png" alt="I am Iron Man.">
▶︎ あくまでテキストの内容を伝えたいだけなので、書体の内容を伝える必要はない。
▶︎ とはいえ、やはりCSSを使ってテキストのまま情報を伝えられるのであれば、テキストを使う方が好ましい。
例： リンクされていないロゴとして使用されるテキストの画像
<img src="abc_company.png" alt="ABC Company®︎">
▶︎ alt="ロゴ画像"のような事例をたまに見つけるが、
何のロゴであるかが不明なので、ロゴの内容を明示する必要がある。
また、サイトのロゴが表しているのは、大抵その文字自体なので、それをそのまま書けばいい。
複雑な画像
▶︎ 短いフレーズや文章で伝えることが難しい情報をもった画像を指す。（グラフやフローチャート、地図など）
例： 地図の内容を画像のみで表現する場合
<img src="text_02.png" alt="弊社ビルまでの地図。〇〇駅、〇番出口を出て、まっすぐ5分程歩くと見える建物になります。">
例： テキスト + 地図 で一つの情報を表現する場合
<img src="text_02.png" alt="弊社建物までの地図。地図に続いて詳細。">
<p>〇〇駅、〇番出口を出て、まっすぐ5分程歩くと見える建物になります。</p>
グラフやフローチャートなど、グラフによっても適切な指定の仕方が異なるので、今回は割愛。
詳細はこちらに記載されています。気になる方はこちらの『事例１３. マップのalt属性値のつけ方』あたりをぜひ参考に。
集合画像
▶︎ 複数の画像で一つの画像を表現する場合に使用するものを指す。
例： 5つ星評価の画像
評価:
<img src="star-full.jpg" alt="5つ星のうち3.5">
<img src="star-full.jpg" alt="">
<img src="star-full.jpg" alt="">
<img src="star-half.jpg" alt="">
<img src="star-empty.jpg" alt="">
▶︎ 画像全てにaltを指定する必要がないので、先頭の画像にのみaltをつけ、それ以外の画像は空にする。
画像マップ
▶︎ 画像の中でクリッカブルな領域が細かく分かれている場合（店舗地図などを想像するとわかりやすい）
例： 店舗マップの場合
<img src="map.png"
alt="関西エリアの店舗マップになります。各エリアをクリックすると各店舗の情報に遷移します。"
usemap="#Map">
<map id="Map" name="Map">
<area shape="rect"
coords="X,XX,XXX,XX"
href="[…]"
alt="神戸〇〇店">
[…]
<area shape="rect"
coords="X,XX,XXX,XX"
href="[…]"
alt="尼崎店">
[…]
</map>
▶︎ 一つの画像の中でさらに詳しくクリッカブルな領域を定義するmapタグとareaタグを使用する。
▶︎ areaの中には個別の要素を識別するための代替テキストを使用する必要がある。
altの指定に迷ったとき
どうしてもaltの指定に迷った時は下記の原則を軸に考える。
- 画像をテキストに置き換えても違和感なく、情報を伝えることができるか
- 画像と代替テキストの意味合いが等価であるか
-
繰り返しを避ける
- 例えば、先の機能画像（例： リンクテキスト内の情報を伝えるアイコン画像）
であった事例の場合に、altにもテキストの内容が入っていると、スクリーンリーダーで同じ意味の言葉が繰り返し読み上げられてしまうので、冗長と言える。
このことから、画像と代替テキストの内容が重複するのは避けた方がよい。
▶︎ テキストと画像で意味が重複している場合は、altを空にするのが有効。
- 例えば、先の機能画像（例： リンクテキスト内の情報を伝えるアイコン画像）
alt属性決定木
上記とは別で、altの指定に迷ったときに適切な判断をするためにAn alt Descision Tree（alt属性決定木）なるものがある。
上から設問に答えておくと迷いづらいかも。
１. その画像は文字を含んでいるか？
はい。（『はい』の場合はすぐ下の設問へ。『いいえ』の場合は、問2へ）
Q. 画像のすぐそばに実際の「テキスト」がある
▶︎ 空にする。
Q. 画像は装飾目的で使用する。
▶︎ 空にする。
Q. 画像は固有の機能（アクション）を持っている。
▶︎ その画像の機能を伝える言葉を入れる。
Q. 画像はテキストとして使うことを目的とする
▶︎ その画像で表現されているテキストをそのまま入れる。
2. その画像はリンクまたはボタンで、その画像がないとリンク/ボタンを押すのが困難？
はい。（『いいえ』の場合は、問3へ）
▶︎ 飛び先のページ情報、ボタンを押したときに発生するアクションを入れる。（リセット、送信するなど）
3. 画像はそのページや、書いてある文脈に意味を与えている？
はい。（『はい』の場合はすぐ下の設問へ。『いいえ』の場合は、問4へ）
Q. アイキャッチ目的の画像やイメージ写真である
▶︎ その画像の意味を与える簡潔な説明書きを入れる。
Q. グラフや複雑な情報を表現している
▶︎ グラフによっては記入の仕方が異なるので、長い説明文を適切に記入する方法を検討する。
Q. 近くにあるテキストと内容が重複する
▶︎ 空にする。
4. 画像は純粋に装飾的なものか
はい。（『はい』の場合はすぐ下の設問へ。『いいえ』の場合は、問5へ）
▶︎ 空にする。
それでも指定に迷う場合
この決定木はすべての場合を網羅しているわけではありません。
代替テキストの提供の詳細については、Images Concepts Pageを参照してください。
そのほかヒントとコツ
-
代替テキストの長さは使用する画像の目的をできる限り簡潔で短く説明する必要がある。
どうしても短いフレーズで表現できない場合は、長い説明文を適切に記入する方法を検討する。 -
句読点はできるだけつけることが推奨されている。
▶︎ スクリーンリーダーを使用する際、仮に画像と隣接するテキストを読むときに、句読点がないと間髪を入れずに音声が読み上げられてしまうため。 -
altの値を空にする際（alt=""）は、中に半角スペースなどのスペース文字を入れない。
-
一般にaltの中で「画像：」や「アイコン：」などといった付加的な情報は不要。
▶︎ 視覚的にページを確認できる人にとってはこれらの情報はすでにわかりきったことであるため -
アクシビリティの観点において、インラインでSVGコードを使用する場合にもSVG画像内の代替テキストを設定することが可能。
<svg role="img" aria-label="SVG 画像の説明">
<title>Settings</title> [other svg code]
</svg>
-
role="img"とaria-label- インラインでSVGコードを使用する場合は、
role="img"とaria-label属性の使用を推奨。- これによりスクリーンリーダーは、いくつかの子ノードで構成されたSVGコードを
単一の要素として認識するので、全ての子ノードを読み上げるのを回避することができる。また、role="img"と指定することで支援技術を使うユーザーにはっきりと対象の要素が画像であることを伝えることができるようになる。（アクセシビリティの改善に有効）
- これによりスクリーンリーダーは、いくつかの子ノードで構成されたSVGコードを
- インラインでSVGコードを使用する場合は、
-
svgタグの子要素に
title属性を付与することで、ユーザーエージェントが画像のテキスト情報を認識することができる。
また、要素をホバーした際にツールチップでテキスト情報が表示されるので、視覚と聴覚の両方において、ユーザーに適切に情報を提供することが可能になる。
おわりに
- 冗長且つ重複する内容は避ける。
- その画像の代替テキストそのものだけでなく、前後の文脈との関係も考える。
- 個人的に気になったことで、装飾的な意図で使う画像は大抵
bakcground-imageで実装することがほとんどであるから、そもそもimgタグを使ってマークアップすることはあまりないのではと思ってしまった。 - 「画像：」や「ロゴ：」みたいな詳細の情報をつけることが自分の中で良いアプローチと思っていたのが、寧ろアンチパターンであることを知った。
- 機能を持った画像に代替テキストを指定する際は、他のパターンと違って慎重に明記する必要があることを知った。
- 結局のところ正解はなくて、利用するユーザーが違和感なくサイトを回遊できるかというところが重要。指定した代替テキストの内容がわかりやすいかどうかのニュアンスの部分は実装者に委ねられる。
参考記事
Discussion