altテキスト：何を書くべきか
画像には装飾画像・機能画像・情報画像がある。装飾画像ではaltテキストを省略しよう。機能画像では操作を記述しよう。情報画像ではメッセージを伝えよう。
altテキスト（代替テキスト）とは、ウェブサイト上の画像に追加する簡潔な説明文で、視覚に障害のある人がスクリーンリーダーを使って視覚的なコンテンツを理解できるようにするものである。よく練られたaltテキストは、ウェブのアクセシビリティとユーザビリティを確保する上で欠かせない。最適なaltテキストは、画像のコンテキストと目的を考慮したものである。
適切なaltテキストの書き方（必要な場合）
画像がタスクの実行やページコンテンツの理解に不可欠なものであれば、altテキストが必要である。以下の推奨事項は、altテキストのあらゆる事例に適用され、画像の種類は問わない。
- 短くする。altテキストは、おおむね150文字を超えないようにする。スクリーンリーダーでは、altテキストの途中で一時停止したり再開したりすることができず、その場合、ユーザーは最初から聞き直す必要がある。また、人間のワーキングメモリーには、あまり多くの情報を保持することができない。altテキストが自分のタスクに役立つとすぐに判断できなければ、ユーザーはそのテキストをスキップしてしまうだろう。
- 冒頭に「画像」や「写真」といった語を入れない。スクリーンリーダーは画像を読み取った際に、それがHTMLの<img>タグに含まれていれば、画像であることをすでに認識している。しかし、画像を特定の形式（たとえば、インフォグラフィック、図表、イラストなど）として明示するのは、ユーザーがそのaltテキスト全体を理解するのに役立つ場合には適切である。
- altテキストの最後にピリオドを付ける（それが完全な文でなくても）。ピリオドを付けることで、スクリーンリーダーがaltテキストの読み上げ後に一拍置くようになる（訳注：日本語の場合は「。」を付ける）。
- altテキストでは、最も重要な単語を冒頭に置く。そうすることで、ユーザーは先に進む前に、そのaltテキストの残りを聞く価値があるかどうかを、適切な情報を得た上ですばやく判断することができる。
- alt属性（alt=””）は空欄にする場合でも常に指定する。そうしないと、スクリーンリーダーが画像のファイル名を読み上げる可能性がある。
- 専門用語や略語は使用しない（ユーザーが確実に理解できる場合を除く）。
- altテキストを使い回さない（同一の画像に対して、その画像が配置されているコンテキストを評価し直さない限り）。
- アイデンティティについて、それが関連している場合に限り言及する。画像内の人々の人種、民族、性別、宗教、文化的な特性が、その画像が用いられた理由と関係がない場合は、それらに言及してはならない。
- ページが対応している各言語でaltテキストを記載する。翻訳キーを用いることでこのプロセスは効率化することができる。
altテキストに含める文言を決める3つのステップ
コンテキストを考慮する
画像の目的を理解するために、ページのその画像の周囲にある文言を読もう。特に画像のキャプションがある場合は、画像への言及や画像の説明がないか確認すること。（AIが適切なaltテキストを自動で作成できない理由として、コンテキストをうまく理解できないというのがある。）
altテキストに何を記載すべきかは、画像のコンテキストと、著者がその画像を掲載した意図によって決まる。最適なaltテキストが、コンテンツの執筆者と画像の選定者からのインプットに基づいたものであるのはそのためだ。同じ画像であっても、コンテキストが変わればaltテキストは変化する。なぜなら、同じ画像でも、使用される箇所が異なれば関連性を持つ要素も異なってくるからだ。
以下の2つの例は、同じ画像でもコンテキストによってaltテキストがどのように変わるかを示している。
HTML：alt=”テキサス大学オースティン校トップページ。”
HTML：alt=”「Texas」という文字の隣に盾をあしらったテキサス大学オースティン校のロゴがあり、その下には「The University of Texas at Austin」と書かれている。”
意図を特定する
画像がその周囲にあるページの文言とどういう関係なのかを考え、その画像が伝えようとしている基本的な内容を書き出してみよう。「なぜ著者はこの画像を掲載したのか」という問いに答えるつもりで考えてみるとよい。
テキストを削る
altテキストでは、その画像がページにもたらす独自の価値に焦点を当てよう。altテキストは、その画像にしか伝えられないメッセージのみに絞り込んで短くし、ページの他の文言と重複しないようにすることだ。（この段階では、AIを使って文章を簡潔にするのも有効である。）
altテキストの判断ツリー
装飾画像にaltテキストは不要
その画像がなくても、ユーザーがすべてのタスクを完了でき、ページ上のすべての情報を理解できる場合、それは装飾的なものである。装飾画像は、視覚ユーザーに対して特定のルックアンドフィールを与えるが、いかなるタスクに関連する情報も伝えることはない。このため、装飾画像はスクリーンリーダーユーザーには余分なものであり、時間や注意を割く価値はない。したがって、スクリーンリーダーが画像をスキップできるように、alt属性は空にしておくべきである。
W3Cは次のように述べている。「画像を情報提供用として扱うか装飾用として扱うかは、その画像をページに含める理由に基づいて著者が判断することである」。
装飾画像には以下のようなものが含まれることが多い：
- 視覚的な魅力を高めるために使われるストックフォト
- メインビジュアル
- 視覚的な効果のためのアイコン
- 装飾目的のボーダー
また、画像ファイルを使用している以下のようなページ要素も、装飾画像に含まれることがある：
- ヘッダー
- スペーサーや区切り線
- 背景パターン
- カラーやグラデーションのオーバーレイ
- アニメーションまたはマウスオーバー効果
HTML：alt=””
HTML：alt=””
HTML：alt=””
機能画像
機能画像とは、ユーザーがインタフェース内で何らかの操作を実行できるようにする画像である。機能画像のaltテキストでは、その画像自体の見た目を説明するのではなく、画像がクリックまたはタップされた際に何が起こるかを記述するべきである。
ただし、クリックされたときに同じ操作を実行できるテキストやラベルが画像に添えられている場合、その画像は冗長なものと考えられるので、altテキストを設定する必要はない。
機能画像には、以下のようなものが含まれる：
- リンク付き画像
- ボタンとして機能する画像
- アイコン
- QRコード
- メディアコントロール
- ナビゲーション要素
- イメージマップ
リンク付き画像
HTML：alt=”家族。”
ボタン
HTML：alt=””
アイコン
HTML：alt=” California.govトップページ。”
HTML：alt=”印刷。”
（なお、Googleでは、この操作と同じことを実行できる「より効率的な方法」があることをユーザーが学習できるように、altテキストにキーボードショートカット［⌘P］も記載している。）
情報画像
情報画像は、画像の周囲にあるページの文言に加えて、タスクに関連する情報を追加するものである。ただし、すでに別の箇所でテキストによって伝えられている情報を視覚化している画像は冗長と見なされ、altテキストが「実際に」必要かどうかは、より踏み込んだ検討を行うのが望ましい。
たとえば、あるデータを分析した文章に添えられた、そのデータセット全体を可視化したグラフは情報画像にあたる。情報画像は、機能的な役割を持っているわけではない。そのため、情報画像のaltテキストでは、その画像だけがページにもたらす価値を明確にし、すでに他の箇所で伝えられている内容を繰り返さないようにする必要がある。このように、情報画像のaltテキストは、最も作成が難しい部類に入る傾向がある。
情報画像には、伝えている情報を文章でどれだけ表現しやすいかによって、シンプルなものもあれば複雑なものもある。
シンプルな情報画像
情報画像のうち、おおむね150文字以内の1文でその主なメッセージを要約できるものはシンプルだと見なされる。
シンプルな情報画像には、以下のようなものが含まれる：
- 写真
- イラスト
- 単純なグラフ
- グラフィックベースのロゴ
- アニメーション
- 単純なグラフィック
- 絵画
- スケッチ
- 単純なレンダリング
- ピクトグラム
- シルエット
グラフや図表のように、一見複雑に見える画像であっても、その主なメッセージは単純なことが多い。
たとえば、折れ線グラフには何百ものデータポイントが含まれているかもしれないが、2つの変数間の単純な相関関係がその主なメッセージであれば、1文で簡潔に説明できるだろう。
HTML：alt=”栄養成分表示は4つのセクションから成る。1食分の情報、カロリー、栄養素、1日の摂取目安量に対する割合である。その割合については、5％以下は低く、20％以上は高いとされている。”
HTML：alt=”小さくて居心地のよい部屋で、温かみのある照明、対話しやすいように複数配置されたクッション付きの椅子、ブランケット、壁には落ち着いた雰囲気の写真が飾られている。”
シンプルな情報画像には、テキストが含まれていることもある。そのテキストがおおむね150文字以内に収まる程度に短く、かつ画像のメッセージにとって重要な要素である場合は、そのテキストをそのままaltテキストに入れよう。それ以外の場合は、そのテキストをそのまま入れる必要はない。
HTML：alt=”ロイヤルブルーのTシャツに太字の黄色い文字で「Golden State Warriors」と書かれている。”
複雑な情報画像
情報画像が複雑なのは、以下の両方に該当する場合である：
- 画像のメッセージを150文字以内に要約できない。
- 構造化された説明のほうが、その意味をより適切に伝えられる。
これは、複数のポイントを伝える複雑なビジュアルにおいてよくあることといえる。
複雑な情報画像には、以下のようなものが該当することが多い：
- 図表
- グラフ
- 図
- ダイアグラム
- マップ
- インフォグラフィック
- 表
- フローチャート
- ブループリント
- X線画像
- ヒートマップ
- 回路図
- ヒストグラム
- マインドマップ
- コラージュ
- タイムライン
- 円グラフ
- ベン図
- ガントチャート
- 栄養成分表示
- スクリーンショット（ページの文言を画像化したもの）
複雑な情報画像をよりアクセシブルにするには、画像の周囲にあるページの文言を調整するとよい。その結果、画像のメッセージが伝わるようにページの文言を編集すれば、そのビジュアル自体が冗長になることもよくある。多くの場合、そうした文言の調整はページのHTML内にリストや表を含めるだけで済む。
ページの本文を変更できない場合は、画像のすぐ上または下にキャプションを追加することを検討しよう。ページの文言を充実させることは、弱視のユーザーや学習障害のあるユーザー、あるいは専門知識に乏しいユーザーにも有用である。ただし、簡潔さとのバランスを取る必要がある。
HTML：alt=””
変更できないページコンテンツについては、長い説明（long description）でaltテキストを補足しよう。長い説明では、通常のaltテキストに収まりきらない、より詳細な情報の提供が可能で、長めの段落やリスト、表を挿入することができる。
長い説明とは、HTML内に記述されているが、スクリーンリーダーを使用しないユーザーには表示されないテキストのことである。画像と同じページに表示することも可能で、理想的には画像の隣に置くのが望ましい。また、画像の隣に設置された非表示リンクから別ページへリンクさせることも可能である。説明文を別ページに配置する場合は、その説明文自体をHTMLの設定やデザイナーの判断により、表示されるようにも非表示にも設定することができる（訳注：ここでの「長い説明」（long description）とは、現在のHTML標準では廃止されているimg要素のlongdesc属性のことではないものと思われる／参考）。
この画像にはaltテキストが必要であるため、データセット全体を表として長い説明の中に含めることで、すべての関連情報を提供し、スクリーンリーダーユーザーが簡単にその情報を構造的にたどって理解することができるようになる。
HTML：alt=”Atlas V、Delta IV Heavy、Vulcan、Falcon 9、Falcon Heavyのエンジンサイクルに関するデータ。”
| Atlas V | Delta IV Heavy | Vulcan | Falcon 9 | Falcon Heavy | |
|---|---|---|---|---|---|
| エンジン | RD-180×1基 | RS-68A×3基 | BE-4×2基 | マーリン1D×9基 | マーリン1D×27基 |
| サイクル形式 | 酸素リッチ・クローズドサイクル | オープンサイクル | 酸素リッチ・クローズドサイクル | オープンサイクル | オープンサイクル |
| 推進剤 | ケロロックス | ハイドロロックス | メタロックス | ケロロックス | ケロロックス |
ただし、別の箇所にある長い説明へのリンクは、すべてのユーザー向けに本文中で分析内容を提示するのに比べ、altテキストにアクセスするインタラクションコストを増加させる。
AIはまだ自動でaltテキストを書けない
執筆時点では、人工知能（AI）ツールは、画像の背後にある意図を伝え、コンテキストに対応した適切なaltテキストを安定的に書くのはまだ難しい。
特にChatGPTのようなLLMのチャットボットを使用する場合は、altテキストを一から作成させるのではなく、すでに書かれたaltテキストを洗練させる目的でAIを使おう。有用なaltテキストを作成する上で欠かせない重要なステップの1つは、その画像を掲載した意図を特定することだからだ。
AIは著者の意図を読み取ることはできず、できるのは「見えているもの」を記述することだけだ。厳密なパラメータと十分なコンテキストを与えれば、冗長な画像やシンプルな情報画像については、まずまずのaltテキストを生成できることもあるかもしれない。しかし、機能画像については、正確なaltテキストを生成するのは難しい。インタフェースとインタラクトすることが難しく、各インタフェース要素が何をするものなのかを正確に理解できない可能性があるからだ。
そして、複雑な情報画像のaltテキストについては、AIが生成する文章は長くなりすぎる傾向がある。
将来的にはアクセシビリティソフトウェアがAIを活用し、手間のかかるアクセシビリティ作業を効率的に支援してくれることが期待されるが、現時点ではまだその段階には至ってはいない。AIを搭載したアクセシビリティウィジェットでさえ、altテキストの作成にはまだ十分に対応できず、かえってユーザーに悪影響を及ぼすおそれすらあるのである。
また、AIにaltテキストを書かせようとすると、自分で書くよりも時間がかかることが多い。それでも、AIチャットボットを活用したいと考える場合は、画像の背後にある意図を理解している人がその出力結果を必ず確認すべきである。プロンプトには、以下のパラメータを含めるとよい（これらは、AIの出力を評価する際にも利用できる）：
- 文字数の上限（おおむね150文字以内）（ただし、簡潔に書くことと、有用なaltテキストであることは同じではない点に留意すること。）
- 画像のコンテキスト（文章による説明、またはページ全体における画像のコンテキストがわかるようなスクリーンショット）
- 画像の見た目ではなく、画像が伝えるメッセージを記述するよう注意喚起すること
- ページ上の他の記述と重複しないように、その画像だけがページにもたらす内容に焦点を当てること
我々も、Everyday AstronautのウェブページのスクリーンショットとプロンプトをAIに入力し、AIのaltテキスト作成能力をテストしてみた。
主要なLLMチャットボットのいくつかに上記の情報を提供したが、結果はおおむね期待外れだった。簡潔さを優先するあまり、重要な詳細が省略されることが多く、どのチャットボットも画像の重要な側面を誤認していた。AIが生成したaltテキストは、多少の編集を加えれば使えるレベルにはなったが、彼らを手取り足取り導こうとして、自分たちで書くよりも多くの時間と労力がかかってしまった。
結論
HTMLコード内のaltテキストが適切に機能することを、公開前に必ずテストして確認しよう。オンライン上には多くのテストツールが存在しており、たとえば、ユタ州立大学のInstitute for Disability Research, Policy & Practiceが提供しているブラウザ拡張機能では、ブラウザ上でアクセシビリティに関する問題を直接テストすることが可能である。理想を言えば、弱視または全盲のユーザーにサイトを公開前にテストしてもらい、彼らが直面した問題点を報告してもらうのが望ましい。
何事にも言えることだが、適切なaltテキストの作成には練習が必要である。そして、altテキストを実装する前には必ず評価を実施することだ。さらに、ユーザーの目的を達成することが最優先であることを忘れないようにしよう。視覚的なエクスペリエンスを再現しようとするのではなく、必要な情報をユーザーが効率的に得られるように支援することが重要なのである。
補足資料
優れたaltテキストの作成に役立つ素晴らしい資料はいろいろとあるが、我々のお気に入りの2つを紹介しよう：
