代替テキスト（alt属性）は、画像と同等の内容を伝えるテキストです。HTMLでは、img要素に付けるalt属性にあたります。実際の役割は、読み手が画像を見られないときに、その画像の目的を保つことです。スクリーンリーダーが読み上げ、テキストのみの表示や低帯域の環境でも表示され、検索システムは周囲のページの内容とあわせて、画像を理解するために使えます。狙いたいクエリを繰り返す欄でも、単独で順位を動かす手段でもありません。
キーワードではなく、目的を書く
同じ画像でも、文脈によって必要な代替テキストは変わります。商品一覧にある青いマグカップの写真なら、商品名、色、素材が必要かもしれません。オフィスの習慣についての記事なら、役に立つ事実は、マグカップがノートの横にあることかもしれません。同じ事実をすでに述べている段落を飾るだけの写真なら、適切な代替テキストは空、つまりalt=""です。W3Cの画像に関するガイダンスは、この区別を目的で行います。情報を伝える画像は重要な情報を説明し、機能を持つ画像は動作や移動先を説明し、装飾的な画像には空の代替テキストを指定します。
- 情報を伝える画像
- 読み手が見逃してしまう情報を書きます。例：「机の上のノートの横にある、青い陶器のマグカップ」。
- 機能を持つ画像
- 動作や移動先を書きます。「ショッピングカートのアイコン」より、「チェックアウトを開く」のほうが役立ちます。
- 装飾的な画像
- 情報を加えず、操作用のコントロールでもない場合は、alt=""を使います。
- 複雑なグラフや図
- alt属性には短い要約を書き、調査結果、ラベル、データは、近くの本文かリンク先の説明に載せます。
適切な代替テキストを選ぶ
まずページのメッセージを確認し、そのうえで画像がどんな役割を担っているかを決めます。こうすれば、見栄えのする細部を説明して、ページの理解に必要な事実を書き落とすという、よくある失敗を避けられます。グラフに「月ごとの登録数」のようなラベルを付けるだけでは、足りないことが多くあります。本文でも、重要な傾向と値を述べます。画像リンクについては、Googleのドキュメントに、画像の代替テキストがアンカーテキストとして使われると書かれています。そのため、代替テキストでは、リンク先や動作を伝えます。リンク内の装飾的な画像は別です。その場合も、リンクには、見えるテキストなどの確かなラベルによるアクセシブルな名前が必要です。
| 画像の用途 | 適切な代替テキスト | 避けること |
|---|---|---|
| 商品写真 | 具体的な商品、区別できるバリエーション、見えている状態 | 宣伝文句や、繰り返しのショッピング系クエリ |
| アイコン付きのボタン | 「レポートをダウンロード」のような動作 | 「青い矢印」 |
| グラフ | 短い結論と、全データを載せた近くの本文 | alt属性に詰め込んだ長い数値の羅列 |
| 装飾的な区切り線 | 空のalt属性 | ファイル名や、一般的な「装飾」という語 |
代替テキストの書き方と確認
代替テキストは、画像を最終的な本文の横に置いてから書きます。文の一部として聞き取れる程度に短くし、重要な違いは先頭に置き、関連する場合は、読み手がすでにページで目にしている用語を使います。文字数の目安を一律に決めることはできません。アイコンなら2語で足りることもあれば、商品画像には短い1文が必要なこともあります。簡潔に表せない内容なら、長い説明をページの本文に表示します。
- 最終的なページの文脈で、画像を、情報を伝える画像、機能を持つ画像、複雑な画像、装飾的な画像のどれかに分類します。
- 目的を保てる最小限の語句を書きます。「〜の画像」など、意味を加えない言い回しは削ります。
- 代替テキストを、キャプション、見出し、隣接する本文と見比べ、矛盾せず、かつ単なる繰り返しにもなっていないか確かめます。
- レンダリング後のHTMLで、img要素と意図したalt属性の値を確認します。画像のURLやCMSのメディアタイトルは代わりになりません。
- 代表的なテンプレートは、スクリーンリーダーで聞くか、アクセシビリティツリーを調べます。そのうえで、繰り返しのコンポーネントや画像がない場合のサンプルを確認します。
意味を持つ画像と装飾を区別し、意味のほうを代替テキストにします。ファイル名やキーワードを詰め込みません。これは見直しの方法であり、サイトのすべての画像がアクセシブルである証明ではありません。完全な見直しでは、レンダリング後のテンプレート、リンクになっている画像、編集のワークフローも確認します。
限界とよくある誤り
代替テキストは、アクセシビリティを高め、検索システムに関連する手がかりも与えます。ただし、アクセスできないコントロール、ブロックされた画像、無関係なページの本文、複雑な図に対する本文での説明の欠如は、補えません。Googleは、代替テキストだけでなく、ページの文脈、キャプション、ほかのシグナルも使って画像を理解します。画像の発見と、画像のランディングページの品質は、別々の確認項目として扱います。
- ファイル名、CMSのタイトル、キーワードのリストを、代替テキストにしてはいけません。
- 空でないaltのほうが常に良いと思い込んではいけません。装飾的な画像は、通常、alt=""で読み飛ばします。
- ページのほかのどこにもない法的な指示、データ、行動喚起を、alt属性に担わせてはいけません。
- テンプレートが受け付けるからといって、関係のない商品画像に、同じ一般的な代替テキストを使い回してはいけません。
- 代替テキストを付ければ、Web検索の順位、画像の表示、アクセシビリティ適合の結果が保証されると言ってはいけません。