ウェブアクセシビリティ対応の中でかなり重要なのが、画像に含まれる情報を別の手段でも提供することです。
別の手段の具体例としては、代替テキストやキャプションなどが挙げられます。
画像に含まれる情報を別の手段でも提供するようにすると、画像を視認できない状況の人でも画像内の情報を得られるようになります。
つまり、代替テキストやキャプションなどはそういった人々にとって大切な情報源となるのです。
今回の記事では、画像に含まれる情報の取り扱いに焦点を当て、どうして別手段での情報提供が必要なのか、どのように提供するのが良いかを具体的に解説します。
1.画像を別の手段でも提供する必要性は？
画像に含まれる情報を代替テキストなどでも提供することは、ウェブアクセシビリティ対応の中でかなり重要です。
それには、以下のような理由があります。
- あらゆる人が同じ情報を得られる必要がある
- 市場を拡大し、新たなユーザーを取り込める可能性がある
- 検索エンジンの最適化（SEO）になる
１つずつ詳しく見ていきましょう。
1-1.あらゆる人が同じ情報を得られる必要がある
ウェブアクセシビリティにおいて「あらゆる人が同じ情報を得られる」というのは非常に重要です。
なぜなら、得られる情報に差があることで不利益を被る人が生まれてしまうのは、不公平で望ましくないからです。
例えば、あるイベントが開催されるとします。
そのイベントの開催概要はウェブアクセシビリティに対応していないホームページで公開されているため、一部の人々は詳細を知ることができません。
その結果、参加したくてもできない人が出てきてしまいます。
これは、情報が「得られた人」と「得られなかった人」の間に「参加できる」「参加できない」という差が生まれてしまったと言えます。
このように、情報を得られなかったことで一部の人が不利益を被る状況は望ましくありません。
そうならないために、あらゆる人が同じ情報を得られるようにする必要があるのです。
特に現代では教育、就職、コミュニケーション、娯楽など生活のさまざまな面でウェブが活用されています。
そのため、ウェブ上の情報を得られないと、格差はどんどん広がってしまうのです。
そして、情報を伝える場合はテキストだけでなく画像が併用されることも多くあります。
「画像を視認できない人は情報が得られない」という事態を回避するため、画像を見て得られるのと同じだけの情報を他の手段でも得られるようにすることが必要なのです。
1-2.市場の拡大や新規ユーザー獲得の可能性がある
ウェブアクセシビリティを向上させたコンテンツの提供は、市場を拡大させたり新たなユーザーを取り込むことに繋がる可能性があります。
なぜなら、ウェブアクセシビリティを向上させることで、従来そのコンテンツを利用することが難しかった人々が利用可能になるからです。
利用できる人が増えれば、それだけ市場の拡大や新規ユーザー獲得のチャンスも増えることになります。
これは画像に関しても同じです。
画像に含まれる情報を誰もが得られるように工夫したコンテンツの提供は、市場拡大・ユーザー増加などに繋がる可能性があります。
画像は製品やサービスの仕様を説明したり、契約までの手順を紹介するためによく使用されます。
これらの画像に代替テキストやキャプションを提供していない場合、画像を視認できない人には情報が伝わりません。
何も分からない状態では製品の購入やサービスの利用ができず、結果的に潜在的なユーザーを逃してしまうことになります。
反対に、代替テキストやキャプションを提供していれば商品の魅力やサービスの良さが伝わり、購入や利用してもらえるチャンスを増やすことができます。
1-3.検索エンジンの最適化（SEO）になる
画像だけを見て検索エンジンがその内容を完全に理解することは困難です。
そのため、検索エンジンは代替テキストやキャプション、本文からウェブサイトや画像の内容を把握しています。
代替テキストを適切に設定するなどで画像に含まれる情報を提供している場合、検索エンジンに有効なコンテンツだと判断されやすくなりSEO対策に繋がるのです。
現在は生成AIによる検索体験（SGE）という技術も取り入れられ、検索の仕組みが変わりつつあります。
しかし、AIが画像を理解するのにも代替テキストやキャプションが大切であることに変わりはないと考えられます。
2.画像に含まれる情報を提供する方法とは？
画像に含まれる情報を提供する方法は、大きく分けて3つあります。
- 代替テキストを提供する
- 本文で説明する
- キャプションを提供する
2-1.代替テキストを提供する
代替テキストとは、ウェブサイト上の画像が何らかの原因で表示されないときや、音声読み上げ機能を使用したときに、画像の代わりに情報を提供するテキストのことです。
HTMLのimgタグを使用して画像を挿入する際に、alt属性で代替テキストを設定することから「alt属性（オルト属性）」や「alt（オルト）」とも呼ばれています。
代替テキストの付け方などを3回に分けて解説した記事がありますので、代替テキストについて詳しく知りたい方はこちらをご覧ください。
2-2.本文で説明する
上記は申し込みフローの画像です。
こういったフロー画像や、組織図のような情報量が多い画像の場合、代替テキストでの対応は不向きです。
代替テキストにすべての説明を含めてしまうと、テキストリーダーで読み上げるときに一気に読み上げてしまい大変分かりにくくなるからです。
このような場面では、本文で説明する方法がおすすめです。
また、情報量の多い画像は、画像を視認できるユーザーにとっても複雑で分かりにくく感じられることがあります。
本文に画像の説明を載せることで、画像を視認できる人・できない人のどちらにとっても分かりやすくなるのです。
上の図は、画像の内容を本文で説明するときの例です。
図の上側にはフロー図があり、アイコンなどを使用して、お問合せ、ヒアリング、お見積り、契約、アフターサポートの流れについて紹介しています。
さらに、それぞれのステップで詳細な説明がされていますが、これはフロー図の一部であるのでテキストリーダーで読み上げることができません。
これらの詳細な説明をすべて代替テキストにしてしまうと、大変分かりにくくなってしまいます。
そこで、画像下の本文部分に下記のように記載しています。
STEP1
まずはお気軽にお問合せください。
お電話やメール、当サイトのお問合せフォームにてお問合せを受け付けています。
STEP2
お問合せいただいた内容をもとに詳細なヒアリングを行います。
ご予算やスケジュール、ご要望に合わせたカスタマイズも可能です。
STEP3
ヒアリングが終わりましたら、ヒアリングの内容をふまえて具体的なサービスとお見積りをご提案します。
ご不明点があればいつでもお尋ねください。
STEP4
ご提案内容にご納得いただけましたら、契約へと進みます。
契約内容をご確認いただき、ご質問やご不明点があればお申し付けください。
STEP5
ご契約後は充実したアフターサポートをご用意しています。
使用中に生じた疑問やトラブルがあれば、お気軽にご相談ください。
ご満足いただけるサービスをご提供するため、迅速な対応を心がけています。
こうやって画像内の説明と同等の説明を本文として提供することで、画像が見られない状況でも同じ情報を得ることができるようにしているのです。
本文に画像の説明を載せることのメリットがもう1つあります。
それは、画像が見切れてしまった場合などでもユーザーが情報を得ることができるという点です。
ホームページの作り方によっては、デバイスによって画像が見切れてしまったり上手く表示されない可能性があります。
まず、そうならないホームページを作ることが第一です。
しかし、何らかの不具合が発生し画像が上手く表示されない場合でも、画像内の説明と同等の説明を本文として提供することで、ユーザーに必要な情報が伝わらない状況を防げます。
2-3.キャプションを提供する
代替テキストに入れるには長いけれど本文に書くほどの量でもない、本文に入れることが難しいなどの場合はキャプションを付けると良いでしょう。
また、キャプションは画像の内容を迅速に把握できることから、視覚情報を得られるユーザーにとっても有用です。
ネットニュースの記事や新聞などでは、短い説明で済む場合でもキャプションが多く利用されています。
このようなキャプションを見かけたことはありませんか？
この画像では、「柴犬について」というタイトルで記事が書かれており、右下に柴犬の写真が挿入されています。
そして、写真の真下には少し小さめの文字で「柴犬の写真」というキャプションが付けられています。
また、キャプションは文中などで説明するより直感的に分かりやすいため、データを提示する際などによく使われます。
この画像は、データを提示する際にキャプションが使用されている例です。
「〇〇について」というタイトルで記事が書かれており、左側に縦棒グラフが挿入されています。
グラフの真下には少し小さめの文字で「〇〇についてのグラフ。Dの値が一番高く、その後はC、E、Bの順に続き、Aが最低値になっている。」というキャプションが付けられています。
このようにグラフの内容を要約するのにもキャプションは有効です。
3.代替テキストの確認方法
画像に含まれる情報を別の手段でも提供する場合、分かりやすい表現になっているかを確認することはとても大切です。
本文で説明する場合とキャプションを提供する場合は、ホームページ上にそれらが表示されるため目視で確認ができます。
しかし、代替テキストはホームページ上にそのまま表示されないので、別の方法で確認する必要があります。
ここでは、デベロッパーツールを使用して確認する方法を紹介します。
一般的に利用されているブラウザには、デベロッパーツール（検証ツール、開発者ツールなどとも呼ばれる）が存在しています。
ブラウザにより開き方は異なりますが、右クリック、ショートカットキーなどを使用して開きます。
今回はGoogle Chromeを例として、デベロッパーツールの開き方と代替テキストの確認方法を見ていきましょう。
3-1.Google Chromeでデベロッパーツールを開く方法
1.Google Chromeでチェックしたい画像があるウェブページを開きます。
2.そのページ上で右クリックをします。
3.下記のようなメニューが表示されるので「検証」をクリックします。
4.デベロッパーツールが開きました。
3-2.Google Chromeで代替テキストを確認する方法
1.
デベロッパーツールを開いたあとに、赤矢印が指しているアイコンをクリックします。
小さいので分かりにくいですが、カーソルを置いてしばらくすると「Select an element in the page to inspect it – Ctrl + Shift + C」と説明が表示されるアイコンです。
2.
1のアイコンをクリックすると、画像が選択できるようになります。
確認したい画像をクリックしましょう。
なお、短い代替テキストの場合、この時点でNameの項目から内容をチェックすることができます。
下の画像のようにNameの項目が見切れている場合は、次のステップに進んで下さい。
3.
2で画像をクリックすると、デベロッパーツール上で画像のソースコードがハイライトされます。
その部分の「alt=”〇〇”」という部分を探してみてください。
〇〇の部分が代替テキストの内容です。
これで代替テキストの確認ができました。
できれば、さらにテキストリーダーを使用して実際に聞いてみることをおすすめします。
目で見たときは違和感がなくとも、聞いてみると長すぎてよく分からない、漢字が正しく読み上げられず意味が通らないという場合もあります。
そのようなときは、別の表現に変えてみると良いかもしれません。
みんなが使いやすいホームページを作るために取り組んでいること
4.まとめ
今回は、画像に含まれる情報を別の手段でも伝えるという点に焦点を当てて解説しました。
適切な代替テキストやキャプション、説明を提供するというのは、やってみると案外難しいものです。
最初はどんな代替テキストやキャプションが適切なのか分からず、付け方に迷うこともあると思います。
そのようなときは解説サイトで適切な付け方を学んだり、ウェブアクセシビリティ対応のホームページで使用されている代替テキストやキャプションを観察してみると感覚が掴めてくると思います。
今後ホームページやブログに画像を載せるときは、画像に含まれる情報を他の手段でも提供することをぜひ意識してみてください！
