《メディアコンテンツの伝え方 Vol.8》代替テキストのケーススタディ：写真やアート作品（1）
今回はケーススタディとして、写真やアート作品に対する代替テキストの指定方法について解説していきます。
その前に、前回の記事で出題したクイズを振り返ってみましょう。問題は「次のうち、代替テキストを空（alt=””）にすべきものはどれでしょうか？」というもので、選択肢は次の3つでした。
- A. サイトのフッターにある、単独で「GitHub」のロゴが表示されており、GitHubアカウントへのリンクとなっている画像
- B. Webサイトのグローバルヘッダ内にある、会社ロゴの画像と並んで会社名がテキストで記述されている場合のロゴ画像
- C. オンラインショップで、商品一覧ページへのリンクの横に「New!」という文字が画像化されて表示されており、「新着商品がある」ことを示している画像
正解は 「B. Webサイトのグローバルヘッダ内にある、会社ロゴの画像と並んで会社名がテキストで記述されている場合のロゴ画像」 です。
ロゴ画像のすぐ隣に会社名がテキストとして明記されている場合、そのロゴは視覚的な補助や装飾として扱うことができます。この文脈では、実際に情報提供の役割を担っているのはテキストの会社名であり、ロゴは意味内容を追加していません。そのため、代替テキストは空（alt=””）にしても問題ありません。
一方で、AやCのように画像自体が リンク先の意味 や 「新着」であることの通知 といった重要な情報を担っている場合、画像を装飾扱いにはできません。代替テキストを省略すると情報が欠落してしまうため、適切なテキスト（例：「GitHub」「新着」など）を指定する必要があります。
はじめに
前回は、画像を使ったボタンやリンク、そして画像化されたテキストにおける代替テキストの考え方を解説しました。今回はさらに一歩進めて、「写真」 を扱う際の代替テキストについて見ていきましょう。
- 人物の写真
- 風景の写真
- 物の写真
- 動物の写真
- AIが生成したアート
写真
写真の場合、基本的には「その写真に写っているものを見たまま伝える」形で代替テキストを指定するのが一般的です。ひと口に写真といっても、人物・風景・物・動物などさまざまな種類があり、文脈によって伝えるべき情報も変わります。では、それぞれどのような代替テキストを付けるのが適切なのでしょうか。
筆者が代替テキストを作成する際に意識しているフォーマットは、主に次の3つです。
- おおまかなジャンル
- 写真内で着目しているもの
- その内容を補足する特徴
この後、さまざまな写真の代替テキスト例を紹介していきますが、どの例にもこの3点が共通して意識されていることがわかるはずです。
それではまず、人物写真 の代替テキストから考えていきましょう。
人物の写真
CodeGridでは、記事やシリーズの近くに、それに関わる著者情報が表示されます。
リンクされている画像は、alt属性著者が1名の場合は、著者の画像・名前・肩書が表示されます。HTMLとしては、次のようなコードになります。
<a href="/authors/geckotang/">
<img src="geckotang.jpg" alt="">
<span>坂巻 翔大郎</span>
<span>フロントエンドエンジニア</span>
</p>ここで表示している著者画像は、あくまで装飾的な役割として扱っているため、代替テキストは空（alt=””）にしています。
一方、著者が複数名いる場合は、著者の画像のみが表示されます。
<ul>
<li>
<a href="/authors/takazudo/">
<img src="takazudo.jpg" alt="高津戸 壮">
</a>
</li>
<li>
<a href="/authors/5509/">
<img src="5509.jpg" alt="德田 和規">
</a>
</li>
</ul>複数名の著者を表示する場合は、レイアウトの都合上、画像の横に名前を併記していません。そのため、画像には 著者名を代替テキストとして指定 しています。
また、1名の場合も複数名の場合も、著者画像はそれぞれ 著者の詳細ページへのリンクになっています。リンクテキストに相当する代替テキストで「誰の詳細ページに遷移するのか」がわかるようにしておく必要があります。
リンク先である著者の詳細ページでは、著者の画像・名前・肩書・プロフィールなど、より詳しい情報が表示されます。
このページでは著者画像の代替テキストが空になっています。しかし、著者の詳細ページは著者情報を知るためのページであるため、ここでは画像に写っている内容を代替テキストとして指定する方が適切だと考えています。
<h1>著者紹介</h1>
<p>
<img
src="path/to/file.jpg"
alt="著者画像：ベージュの帽子をかぶり、メガネをかけた男性の横顔。
愛犬のイタリアングレーハウンドを抱きしめている。"
>
坂巻 翔大郎
</p>写真の様子が本文の文脈を変えることもある
写真に写る人物が強く怒っていたり、悲しんでいるような様子は、文章の文脈に影響を与えることがあります。こうした場合には、その人物の「様子」を代替テキストに記述することもあります。まずは、代替テキストがない例を見てみましょう。
<!-- 例1 -->
<p>
<img src="geckotang.jpg" alt="">
買ってきた卵を割った。
</p>例1の場合、人物写真の代替テキストは空です。これは、ただ卵を割っただけだと推測できます。
次に、文章の文脈を変えるような写真の代替テキストを指定してみます。
<!-- 例2 -->
<p>
<img src="geckotang.jpg" alt="写真：怒っている坂巻さん">
買ってきた卵を割った。
</p><!-- 例3 -->
<p>
<img src="geckotang.jpg" alt="写真：悲しんでいる坂巻さん">
買ってきた卵を割った。
</p>例2の人物写真では、代替テキストから人物が怒っている表情であることが示されています。この場合、怒りのあまり卵をぐしゃりと割ったように推測できます。
例3は、悲しげな表情を浮かべています。卵を落として割ってしまい、悲しい顔をしているのかもしれません。
このように、写真の内容によって文章の文脈が変わる場合は、代替テキストでもその写真の雰囲気を表現するとよいでしょう。
人が集まっている写真
次の写真は、「DevFest.Asia 2015レポート 第1回 DevFest.Asiaとは」という記事にある、参加者の休憩タイムの様子を収めたものです。人物が写っているからといって、ひとりひとりの特徴を細かく書く必要はありません。この写真が伝えたいのは、休憩中に多くの人が集まり、軽食を取っている様子です。
この写真の代替テキストは、次のような形が適切でしょうか。
<p>
15時半すぎには会場内にバーがオープンし、アルコール片手にセッションを聞く参加者の姿も見られました。
<img
src="path/to/file.jpg"
alt="写真：休憩タイムの会場の様子。
数十名の参加者が集まり、提供された軽食を楽しんでいる。"
>
1トラック進行に加えて、こういった合間の時間が多くとられているのは良い形式だなと感じました。
</p>人が集まっている写真であっても、写っている人物が主役である場合は、それぞれの人物について触れたほうが良いでしょう。次の写真は、「いまどきのコンポーネント設計をめぐる座談会」最終回の末尾にある、座談会参加者の集合写真です。
この写真が登場する前に、記事冒頭の「前回までのお話」で、参加している人物について触れられています。そのため、各人物については代替テキストで改めて説明する必要はありません。
<p>
——今日は長時間ありがとうございました。
<img
src="path/to/file.jpg"
alt="写真：テーブルを囲んで談笑する6人"
>
</p>もし座談会の記事の冒頭にこの写真が登場する場合は、誰が誰であるかの対応関係を示すために、各人物について触れたほうが読者にとってわかりやすいでしょう。
<p>
ピクセルグリッドの高津戸が、コンポーネント座談会ならぜひ原田さんをお呼びしたいと提案があり、実現しました。
<img
src="path/to/file.jpg"
alt="写真：テーブルを囲んで談笑する6人。
テーブル左側は手前から小山田、小原、高津戸。
その向かいには、手前から坂巻、原田、矢倉。"
>
</p>もし登場人物の説明が画像のあとに続く場合は、代替テキストを簡略にして、本文で詳細を読んでもらうように促す方法もあります。
<p>
<img
src="path/to/file.png"
alt="写真：テーブルを囲んで談笑する6人。詳細は以下。"
>
</p>
<p>
テーブル左側は手前からピクセルグリッド 小山田、小原、高津戸。その向かいには、手前から坂巻、株式会社Gaji-Labo 原田、ピクセルグリッド 矢倉。
</p>どちらの場合も、「和気あいあいとしたムードで行われた座談会の様子」を伝えたいので、「話し合う6人」ではなく「談笑する6人」としています。
代替テキストもコンテンツの一部であり、文脈によって適切な表現が変わることを忘れないようにしましょう。
風景の写真
次の写真は、筆者が撮影した風景写真です。代替テキストはいったん「風景写真」としています。
風景写真の場合は、その風景の特徴を伝えるようにします。
写真には、ピントが合っている部分や画面中央の被写体など、撮影者が「ここに注目している」という主観が自然と含まれます。しかし、写真からは読み取れない情報を代替テキストに含めることは避けます。基本的には主観的な表現は本文に委ね、代替テキストでは客観的な表現を用いるのがよいでしょう。
撮影者である筆者は、代替テキストを次のようにしました。
<p>
先日、草津に行ってきました。
<img
src="path/to/file.jpg"
alt="風景写真：草津の湯畑の北側にある湯滝の様子。
黄色や緑色になった岩壁を湯が勢いよく流れる。"
>
</p>その様子については、もう少し詳しく書いてもよいかもしれません。
<p>
先日、草津に行ってきました。
<img
src="path/to/file.jpg"
alt="風景写真：草津の湯畑の北側にある湯滝の様子。
黄色や緑色になった岩壁を湯が勢いよく流れる。
流れ落ちた湯の色は鮮やかなエメラルドグリーンのよう。"
>
</p>写真の中に文字として「草津の湯畑」と書かれているわけではありませんが、この光景はよく知られており、視覚的にも容易に識別できると考えたため、「草津の湯畑」である旨を代替テキストに含めています。筆者はこの光景の滝の流れや、岩の変色した様子に興味を持って撮影しました。そのため、代替テキストにもそれらの要素を含めています。
もしこの写真が草津の湯畑の記事内で登場し、前後の文章で滝の特徴に触れている場合は、代替テキストは次のように簡略化することもできます。
- “風景写真：草津の湯畑の北側にある湯滝。”
- “風景写真：草津の湯滝。”
- “風景写真：湯滝。”
このように、写真の前後の文脈によって、代替テキストは簡潔にもできます。
前述の「写真からはわかりえない主観的な情報」にあたりそうな代替テキストの例を挙げると、次のようになります。
- “風景写真：草津の湯滝。水しぶきや湿度が高く感じた。”
- “風景写真：多くの観光客が訪れる草津の湯滝。”
- “風景写真：9月1日の草津の湯滝の様子。”
現地でしかわからない状況や、写真内に記載されていない撮影日時などは代替テキストに含めず、本文で説明するほうがよいでしょう。
どこまで詳細に書くかは著者次第です。たとえば、”風景写真：草津の湯畑。中央には湯畑、右奥に5階建ての建物、左奥の看板には十字の棒があり、左に日光、上に草津、右に小諸軽井沢とある。”といったように、写真を見ればわかる情報を細かく書くこともできます。ただ、この写真が何を伝えたいのかを意識するとよいでしょう。
冒頭で紹介した
- おおまかなジャンル
- 着目しているもの
- それを補う特徴
というフォーマットを思い出してみてください。
このフォーマットにあてはめた“風景写真：草津の湯畑の北側にある湯滝の様子。黄色や緑色になった岩壁を湯が勢いよく流れる。”を分解すると次のようになります。
- おおまかなジャンル：風景写真
- 着目しているもの：草津の湯畑の北側にある湯滝の様子
- それを補う特徴：黄色や緑色になった岩壁を湯が勢いよく流れる
この特徴は、抽象的な説明から入り、段階的に具体化していく構造です。代替テキストの最初を読めば途中で読むのをやめても大まかな内容が把握できるようになっています。
「何が写っているのか」が最後まで読まないとわからない“風景写真：黄色や緑色になった岩壁を湯が勢いよく流れている草津の湯畑の北側にある湯滝の様子”よりも、わかりやすいと考えています。文章の冒頭で結論がわかる構造が望ましいという点は、代替テキストに限った話ではないのかもしれません。
執筆
坂巻 翔大郎さん
大手ソフトウェアダウンロード販売会社、Web制作会社などで、マークアップエンジニア、プログラマ、サービス企画、ディレクターを経験。2013年、株式会社ピクセルグリッドに入社。HTML、CSS、JavaScriptなどをオールラウンドに担当。とりわけ、プログラマブルなCSSの設計、実装を得意とする。
＜過去記事はこちら＞