LIFULL

代替テキストの考え方

この文書は許諾に基づいてWebAIM: Alternative Textを日本語訳したものです。再利用にあたっては原著を参照してください。

はじめに

代替テキストとは、ウェブページの非テキストコンテンツをテキストで置き換えたものです。この記事は画像に焦点を当てていますが、その原則はマルチメディアや他の非テキストコンテンツにも適用されます。

代替テキストにはいくつかの機能があります。

  • スクリーンリーダーは、画像の代わりに代替テキストを表示し、視覚障害や特定の認知障害を持つユーザーが画像の内容や機能を認識できるようにします。
  • 画像の読み込みに失敗したり、ユーザーが画像をブロックしている場合、ブラウザは画像の代わりに代替テキストを視覚的に表示します。
  • 検索エンジンは代替テキストを利用し、ページの目的と内容の評価に反映させます。

画像に何が写っているかを認識する技術は進歩していますが、アルゴリズムだけでは、ページ全体の文脈の中で画像が何を意味しているかを理解することはできません。カエデの葉はカナダを表しているのかもしれませんし、単に木の葉を表しているのかもしれません。ウェブページの作者は、画像の内容や機能を表す代替テキストを提供しなければなりません。

代替テキストの提供には、2つの方法があります。

  • <img>要素のalt属性で指定する。
  • 画像の近くにある目に見える本文の中に表示する。または、同等のテキストを簡潔に表示できない場合、代替テキストを別のページに表示し、画像または画像に隣接するテキストリンクからリンクさせることができる。

このように、代替テキストは、alt属性だけではありません。

すべての画像には、alt=""（「空白」の代替テキストと呼ばれることもある）であっても、alt属性を付ける必要があります。

コンテキストがすべて

エレン・オチョアの画像を見てみましょう。

example image

この画像は、その使われ方によって、全く異なる代替テキストを必要とする場合があります。

例1

example image

ヒスパニック系女性として初めて宇宙へ行き、その後、ジョンソン宇宙センターでヒスパニック系初の所長を務めたエレン・オチョアは、ロールモデルとして広く知られています。

例1の画像のaltテキストには何を選ぶか？

  • "宇宙飛行士エレン・オチョア"
  • "宇宙飛行士エレン・オチョアの画像"
  • "エレン・オチョア、宇宙に行った最初のヒスパニック系女性"
  • 空のalt属性 (alt="")

まず、その内容と機能を考えてみましょう。画像は、リンクされている場合（あるいは<map>の中に<area>がある場合）、あるいは<button>の中にある場合のみ機能を持ちます。この場合、画像は機能を持ちません。

画像の内容を評価し、要約することは、より困難な場合があります。画像の内容が周囲のテキストで表現されている場合は、alt=""で十分かもしれません。

上の例では、画像のコンテンツが、これがエレン・オチョアであることをユーザーに伝えています。また、彼女の服装から、彼女が宇宙飛行士であることがわかりますが、これは、彼女の功績を考えると、とても意味のあることです。

このことから、alt="宇宙飛行士エレン・オチョア" をお勧めします。

“宇宙飛行士エレン・オチョアの画像” は、画像を画像として説明する冗長なものです。

“エレン・オチョア、宇宙に行った最初のヒスパニック系女性” は、画像の一部ではない情報を含み、また本文と冗長になっています。

空のalt属性も適切ではありません。本文にエレン・オチョアという名前があっても、視覚ユーザは画像の内容から直接それを知ることができます。したがって、画像は内容を伝えるものであり、空のalt属性以上のものが必要です。

例2

example image

宇宙飛行士エレン・オチョア

ヒスパニック系女性として初めて宇宙へ行き、その後、ジョンソン宇宙センターでヒスパニック系初の所長を務めたエレン・オチョアは、ロールモデルとして広く知られています。

例2の画像には、どのようなaltテキストを選ぶのでしょうか？

  • "画像"
  • "エレン・オチョア"
  • 空のalt属性（alt=""）

この場合、画像の内容は隣接するテキストで表示されるため、alt=""が最適です。

“エレン・オチョア” は冗長になります。"画像"は有用な情報を提供しません。

機能的な画像

画像は、コンテンツを提供するだけでなく、ナビゲーションなどの重要な機能を提供するために使われることが多いのです。

例3

example image

宇宙飛行士エレン・オチョア

この画像はリンクされている（そしてそのリンク内の唯一のコンテンツである）ことに注意してください。あなたなら、どんなaltテキストを選びますか？

  • "もっと読む"
  • "宇宙飛行士エレン・オチョア"
  • "宇宙飛行士エレン・オチョアのウィキペディアの項目"
  • 空のalt属性（alt=""）

画像もリンクである以上、機能があります。リンク内の隣接するテキストにはリンクの機能が記述されていないため、画像のalt属性で伝える必要があります。

ですから、alt="宇宙飛行士エレン・オチョア"が最適な選択です。スクリーンリーダーは通常、「リンク、画像、宇宙飛行士エレン・オチョア、宇宙飛行士エレン・オチョア」と読みます。冗長ですが、リンクされた画像の機能を適切に説明するために必要です。特に、スクリーンリーダーのユーザーがリンクでナビゲートする場合など、隣接するテキストから切り離してアクセスする場合は、このような冗長性が必要になります。

“宇宙飛行士エレン・オチョアのウィキペディアの項目”は、画像によって伝達される内容以外の内容、つまりリンクがウィキペディアに行くという事実を提供します。

“もっと読む”は、特に文脈から外れていると、十分な情報を提供しません。

空白のaltテキストは、ここでは決して適切ではありません。リンクやボタンの中にあるコンテンツが画像だけである場合、スクリーンリーダーが判断する材料はaltテキストだけです。テキストが空であったり、欠けていたりすると、スクリーンリーダーは、画像のファイル名やリンク先のページのURLを読み取り、それがユーザーの役に立つことを期待するかもしれませんが、必ずしもそうとは限りません。

次の例のように、画像とテキストのキャプションの両方が1つのリンクに含まれていれば、すべてのユーザーにとってよりアクセスしやすくなります。

リンクされた画像のコンテンツと機能の両方がリンク内のテキストとして表示されるため、重複を避けるために画像にはalt=""が付けられます。スクリーンリーダーは、通常、「リンク、宇宙飛行士エレン・オチョア」と読み、先の例よりもはるかに効率的です。

可能な限り、alt属性に「…へのリンク」「…へはここをクリック」などを使用するのは避けてください。スクリーンリーダーはすでにリンクをリンクとして読み上げています。

例4

例4のアイコン画像には、どのようなaltテキストを選択しますか？アイコンはリンクの中にあることに注意してください。

  • "採用応募"
  • "PDF"
  • "PDFアイコン"
  • 画像の内容は文脈で示されるため、alt=""が適切

“PDF” が最適です。これはアイコンの内容を伝えるもので、それ以上でも以下でもありません。

“採用応募 “は冗長になります。機能（“採用応募書類のダウンロード”）はリンクのテキストで示されるので、alt属性に再び含める必要はありません。

“PDFアイコン”は、画像がどのようなものかを説明していますが、この文脈では最も適切なものではありません。「アイコン」はここでは冗長です。(このアイコンを別の文脈で使用する場合、それがアイコンであることをユーザーに知らせることが重要な場合があります）。

空のaltテキストは、画像が示す重要な情報、つまりリンク先がPDF文書であることを省略してしまいます。

アイコンのみで隣接するテキストなしでリンクする場合、「採用応募書類をPDF形式でダウンロードする」のように、altテキストは、リンクと画像の組み合わせのコンテンツと機能を完全に伝える必要があります。「PDF形式」だけではリンクされたアイコンとして十分ではありません。ページに多くのPDFリンクとアイコンが含まれている場合は特にです。スクリーンリーダーのユーザーがリンクされたアイコンの中を移動すると、「PDF形式、PDF形式、PDF形式…」と聞こえてしまうからです。

装飾的な画像

装飾的な画像とは…

  • 重要な内容を表示しないもの。
  • レイアウトや情報提供以外の目的で使用され
  • 機能を持たないもの（例：リンクではない）。

装飾的な画像には、alt=""を付けるべきです。

例5

example image

例5の水平セパレータ画像には、どのようなaltテキストを選びますか？

  • "装飾的なライン"
  • "フッターの始まり"
  • "セパレーター"
  • alt=""

この画像は、ドキュメントのセクション間の区切りを伝えるものですが、すでにテキストで提示されている構造を視覚的に補強しているに過ぎません。

この画像は追加の内容を伝えるものではないので、alt=""が最も適切な選択です。

例6

example image

私たちのビジネスは、あなたが地球上で見つけることができる最高のサービスを約束します。私たちのチームは、契約交渉のプロセスを通じて優れた顧客サービスを提供するために専門的に訓練されています。

お客様の満足が私たちの最優先事項であり、保証されるか、あるいはお金をお返しします。

例6にある画像の適切なalt属性は何でしょうか？

  • "握手"
  • "契約を完了させるために握手するビジネスマン"
  • alt=""
  • "私たちはプロフェッショナルなサービスを保証します"

画像は関連する内容や重要な内容を伝えていないため、ここでは空のaltテキストが最適です。考えてみてください。もし画像が削除されたら、重要なコンテンツは失われるでしょうか？この場合、おそらくそうではないでしょう。このような画像の多くは、視覚的に有益なコンテンツを提供していないにもかかわらず、スクリーンリーダーのユーザーに対して無意味で冗長なaltテキストを強要しています。

“握手” と “契約を完了させるために握手するビジネスマン” は画像を説明していますが、これは余分な情報です。

“私たちはプロフェッショナルなサービスを保証します” は正しくない。これもウェブでよく見られる間違いです。altを使って、他のどこにも「当てはまらない」余計な情報（または検索エンジン向けの情報）を挿入しているのです。コーダーの論理的根拠は、冗長性を避けることかもしれませんが、なぜそうするのでしょうか。

高度な画像

場合によっては、altテキストの決定がより主観的になることがあります。スクリーンリーダーを使用した場合と使用しない場合のユーザーテストは、いくつかのアイデアを生み出すのに役立ちます。

フォーム画像ボタン

ラスタライズされたテキストを表示するだけのフォーム画像ボタンは、テキストに置き換えられ、CSSでスタイルが設定されるべきです。画像が避けられない場合は、ボタンの機能を説明するalt属性が必要です。altテキストは、“検索”, “送信”, “登録”, “注文を確定” などのように、ボタンが作動したときに何をするのかを説明する必要があります。例えば、<input type="image" alt="検索を送信">は、サイト内検索フォームの画像ボタンとして適切かもしれません。

イメージ・マップ

クライアント・サイドのイメージ<map>を使う場合、メイン・イメージのalt属性は、イメージ・マップのホット・スポットでは表示されないが、イメージ内に表示される内容を伝えなければなりません。例えば、ニューヨーク州の地図で、各郡の<area>がある場合、alt="ニューヨークの郡"となります。メイン画像が内容を伝えず、主にホットスポットのコンテナである場合、alt=""が適切です。

各<area>は機能を提供するため、同等のalt属性を持つ必要があります。ニューヨークの郡のイメージマップの場合、それぞれの<area alt>は郡の名前を含むでしょう。

対照的に、サーバーサイドのイメージ・マップ（マウス・クリックの座標をサーバーに戻して解釈する）は、スクリーンリーダーが認識できず、キーボードやスクリーンリーダーのユーザーには操作不能です。サーバーサイド・イメージマップは、クライアントサイド・イメージマップに置き換えるべきでしょう。

CSS画像

CSS画像は、代替テキストを必要としない装飾的な画像のために使用する必要があります。内容を伝える画像は、一般にCSSで定義すべきではありません。ページコンテンツ内に配置する。CSSや他の背景画像に直接代替テキストを追加することはできないため、背景画像が内容を示す場合は、その内容をページマークアップの中でアクセスできるようにする必要があります。上記の例4のPDFアイコン画像をCSSの背景画像で表示した場合、テキスト置換のテクニックを使って、リンク内のコンテンツを表示させることができます。

<a href="https://webaim.org/techniques/alttext/media/generic_link.htm">採用応募書類のダウンロード<span class="pdficon"> (PDF)</span></a>

次に、CSSを使用して、「(PDF)」のテキスト（span class="pdficon"要素）を画面外に配置します。視覚ユーザーにはPDFの背景画像が見え、スクリーンリーダー・ユーザーには画面外の「(PDF)」テキストが聞こえます。

ロゴ

多くのWebサイトでは、メインブランドのロゴをホームページにリンクしています。画像には、会社名（alt="Acme Company"）などの代替テキストを提供すれば、通常は十分でしょう。ロゴ」という言葉（alt="Acme Company Logo"）は、通常、画像の内容や機能にとって重要な部分ではありません。同様に、画像がホームページにリンクしていることを示す（alt="Acme Company home page"）ことも、通常は必要ありません。なぜなら、これは一般的な慣例だからです。ウェブページの一番上にある「リンク、グラフィック、アクメカンパニー」を聞けば、スクリーンリーダーのユーザーは、それがホームページにリンクしたロゴであると認識すれば十分なのです。

複雑な画像

複雑な画像（チャート、グラフ、地図など）の代替案が、簡潔なalt属性（おそらく数文の長さ）に収まらない場合、代替テキストを別の場所に提供する必要があります。この場合、同じページ内の隣接するデータテーブルか、画像を掲載しているページからリンクされた別のウェブページになります。リンクは画像に隣接していてもよいし、画像そのものを説明ページにリンクさせてもよい。画像の代替テキストは、その画像の一般的な内容を記述する必要があります。

<img src="sales.jpg" alt="年間売上データのラインチャート"><br><a href="salesdata.htm">販売データを見る</a>

longdescに関するノート

longdesc属性は非推奨で、使用しないでください。これは、長い説明ページへの参照を作成する HTML4 属性でしたが、スクリーンリーダーでは決してうまくサポートされていませんでした。

例7

example image

この絵では、画家エマニュエル・ロイツェは、光、色、形、遠近法、比率、動きを使って構図を作り上げました。

例7の画像には、どのようなaltテキストを選ぶのでしょうか？

  • "ジョージ・ワシントン"
  • "ジョージ・ワシントンの絵画"
  • "デラウェア川を渡るジョージ・ワシントンの絵画"
  • "光と色を使って構図を作ることを示した古典的な絵画"
  • "デラウェア川を渡るジョージ・ワシントンの絵画。渦巻く波が船を取り囲み、そこで威厳あるジョージ・ワシントンは、警戒する軍隊を戦いに導くために、嵐の中から川の向こうの光線を前方に見ている。"

画像はリンクされていないので、機能はありません。次に、画像の内容が周囲のテキストで表現されているかどうかを判断する必要があります。この場合、そうではありません（少なくとも完全ではありません）。しかし、この画像はもっと難しい。

“ジョージ・ワシントン” はおそらく不適切です。

“ジョージ・ワシントンの絵画” の方が良いのですが、この場合、写真や他の画像タイプとは異なる絵画であることを表現するのは適切ですが、同等と見なすには十分な内容を提供できているとは言えません。

“デラウェア川を渡るジョージ・ワシントンの絵画” は、ユーザーがコンテンツそのものを識別するのに役立つような、より多くの情報を提供しています。代替テキストは、目の見えないユーザーのためだけのものではないことを忘れないでください。多くの目の見えるユーザーは、「ジョージ・ワシントン」だけでは十分な説明になっていないのに対し、この説明を見れば、問題の特定の絵画を識別することができます。

最後の(冗長な)オプションは、主題よりも技法が重要な場合に適切かもしれません。また、絵画の詳細な調査が必要な場合にも適切ですが、このレベルの詳細については、おそらく本文で説明した方がよいでしょう。

たったひとつの正しい答えはありません。最適な代替テキストは、画像の文脈と意図された内容によって異なります。

Figureとfigcaption

<figure>要素は、<img>と<figcaption>を含むように設計され、自己充足的 (self-contained) で、典型的には文書の主要な流れから単一のユニットとして参照されます。<figure>は、文書の意味に影響を与えることなく、文書の主要な流れから切り離すことができます。

<figure>は、その含まれる<figcaption>との意味的な関連付けを作成し、図についての要約や追加情報を提供したり、図を含む文書に関連付けたりすることができます。しかし、<img>はまだaltテキストを必要とし、冗長性を避けるために、この情報は<figcaption>を介して伝達されるべきではありません。

結論

ウェブアクセシビリティに影響を与える最大の問題の一つであるにもかかわらず、ウェブに代替テキストを実装するための多様で不正確な方法を依然として見続けています。開発コミュニティが同等の代替テキストを完全に受け入れることができれば、ウェブはよりアクセシブルな場所になるはずです。

Ellen Ochoa Image Credit: NASA, Public domain, via Wikimedia Commons.