【アクセシビリティ講座】画像の代替テキスト(alt属性)のつけ方 -入門編-

古澤

こんにちは!はじめまして、古澤と申します。
ウェブサイトを構築するにあたり、コンテンツの移行やウェブアクセシビリティに関わる業務を担当しています。

現代ではインターネットは私たちの生活に必要不可欠となっています。
インターネットは情報を得る側に立つことが多いと思いますが、TwitterなどSNSの普及により情報を発信することも増えてきたのではないでしょうか。
そして、誰もが同じように情報を得ることができる環境を作ること、これはインターネットで情報を発信する我々、特に地方自治体など公共団体にはとても重要になっています。

『バリアフリー』『ユニバーサルデザイン』や『ピクトグラム』といった言葉は聞きなれたものかもしれませんが、インターネットでもこれらの考え方は同じように重要です。特に、インターネット上で情報発信をしている皆さんにとって、必要となるのが『アクセシビリティ』です。

この講座では、アクセシビリティがどうして重要なのか、そしてどのようにアクセシビリティを高めていくのか、具体的な方法とその効果を紹介します。

この記事はこんな人に見てほしい

  • インターネットでの情報発信で画像を掲載する際にどんな代替テキスト(alt属性)を提供すればいいかわからない
  • ウェブアクセシビリティに配慮した代替テキストがどんなものかがわからない
  • 障がい者に配慮したインターネットでの情報発信をしたい
  • ウェブアクセシビリティに配慮したサイトを作りたいが、何をしていいか分からない
  • SDGsに取り組んでいる、取り組もうと思っている

なぜ正しい代替テキストが必要なのか

インターネットは色々な情報を視覚的に伝える、すごく重要な道具ですよね。

でも、全員が視覚的な情報を同じように見ることができるわけではないんです。視覚に困難を抱えている方や、年を重ねて視力が低下してしまった方、あるいは、ネットの環境が悪くて画像がちゃんと読み込めない方もいます。色々な事情でウェブサイトを使っている方々がいるわけです。

そんな中で、ウェブサイトの画像には「代替テキスト(alt属性)」をつけることが大切になってきます。代替テキストというのは、画像の内容を文章で説明するもので、画像がちゃんと表示できなかった時や、視覚に困難を抱えている方が画像の内容を理解するために使います。この代替テキストが、スクリーンリーダーというツールで音声として伝えられるんです。

ただ、代替テキストをつけるだけでなく、「ちゃんとした」代替テキストをつけることが大事になります。それは、画像が伝えたい情報を文章でしっかり表現することです。たとえば、あるイベントのポスターが画像としてある時、その代替テキストにはイベントの名前や日時、場所などの具体的な情報を入れるべきです。

このような小さな気配りで、情報は色々なユーザーにきちんと伝わり、ウェブサイトの使いやすさは大きく上がります。代替テキストは、その一部としてすごく重要な役割を果たすことになります。

ウェブアクセシビリティ以外にもこんなメリットが

代替テキストというのは、ウェブサイトを使いやすくするだけではなく、SEO(検索エンジンをうまく使うこと)にも大きく寄与してくれます。画像そのものからは、検索エンジンが何の情報か読み取ることはできないんです。でも、ちゃんとした代替テキストをつけることで、検索エンジンも画像の内容を理解できるようになり、それがウェブサイトの検索順位に影響を与えることができるんです。

代替テキストを使うことで、ウェブサイトの内容が検索エンジンにしっかり認識されやすくなり、適切なキーワードを入れることで、検索結果で上位に表示されやすくなるんです。さらに、画像がちゃんと表示されなかった時や、表示が遅い時でも、何かしらの情報をユーザーに伝えることができるので、メリットがあります。これによって、ユーザーエクスペリエンス(通称UX。閲覧者がウェブサイトを使って感じる印象。)がよくなり、ウェブサイトの信頼性が上がり、訪問者も長く滞在するようになります。

このように、代替テキストはウェブサイトを成功させるために、とても重要な役割を果たしているんです。

代替テキストのつけ方

普段からウェブサイトの運営に関わっている方の中には、「代替テキストって、要するに障がい者対応でしょ?音声読み上げに対応していればいいんでしょ?」と思う方もいらっしゃるのではないでしょうか?

いいえ、実は代替テキストは音声読み上げだけのためのものでは無いのです。

では、どういうシーンで代替テキストが使われるのでしょうか?

代替テキストが使われるシーン

例えば、目が見えない方・見えづらい方がWebページにアクセスしている場合。

全盲の方はスクリーンリーダーで音声読み上げをしていたり、視力が低い方は文字サイズや拡大鏡・ズーム等で画面を拡大させて見ていたり、画面表示を見やすい色にカスタマイズしていたり…人によって見え方は様々、閲覧方法も様々です。

視力の良い方でも、運転や洗い物をしながら音声読み上げでページを読み上げたり。
はたまた人間以外でも、GoogleHome、Alexaなどのスマート家電がWebページにアクセスして情報を取得していたり。
人によって、ものによって、Webページの閲覧方法は様々なのです。

画像1つとっても、目で見て画像の内容を理解することもあれば、画像を見ずに代替テキストから内容を理解することもある、というわけです。
代替テキストは、思ったよりも色々なシーンで使われているんですね。

画像を見て情報を得る場合、画像を見ずに情報を得る場合、どちらの場合でも同等の情報を得られるようにすることが重要です。
代替テキストを考える際には、「画像を見て得られる情報と同等の情報を言葉で伝えられているか?」を常に頭に置いておきましょう。

代替テキストの重要性が分かったところで、実際に代替テキストをつけてみましょう。

代替テキストを考える時は、「電話で友達に画像の説明をする」感じで考えてみてください。

もしも、目の前の画像を電話越しに友達に説明しなければならないとしたら、どのような言葉を選びますか?大切なのは、その画像が伝えたいメッセージを、言葉だけで伝えられるかどうかです。そのイメージを持つことで、代替テキストを作る時にどんな情報を入れるべきか、どのように伝えるべきか、具体的なイメージが湧きやすくなるでしょう。

それでは、写真を例に実際に代替テキストの実例を見ていきましょう。

古澤
古澤
デジタルガバメント事業部の情報デザイン第2Gに所属。ウェブサイトを構築するにあたり、コンテンツの移行やウェブアクセシビリティに関わる業務を担当しているTeam Leaderです。
2016年にスマートバリューへ入社後、200件以上のサイトのコンテンツ移行、ウェブアクセシビリティを担当してきました。
育休復帰後、仕事と育児を何とか両立...出来ているような、いないような...
SUSTENNAトップへ戻る

株式会社スマートバリュー公式サイト