良い alt テキストの書き方とその必要性

代替テキスト（「alt テキスト」または「alt タグ」とも呼ばれる）とは、画像、イラスト、グラフなどのビジュアルの外観や機能を説明するために、ウェブサイトの HTML に組み込まれるテキストのことです。しかし実際には、alt タグはウェブ上のビジュアル要素を説明するための単なるツールではありません。優れた alt テキストは、SEO や一般的なユーザー体験だけでなく、ウェブサイトの最適化やアクセシビリティにも役立ちます。ここでは、alt テキストのベストプラクティス、良い alt テキストの書き方、そしてなぜ alt テキストが重要なのかをご紹介します。

alt テキストとは？

alt テキストの目的は、ウェブサイト上の画像が何を示しているのか、そしてサイトユーザーがその画像を見ることができない場合にそれが持つ意味を説明することです。例えば以下のような方の役に立ちます。

• 視力が限られている、または全くない方
• スクリーンリーダーやその他の支援機器を使用している方
• データを節約するために画像をオフにしている人
• ビジュアルコンテンツを分類してくれる検索エンジン

読み込みやインターネット接続の問題でウェブサイトに画像が表示されない場合、画像があるはずのスペースに画像の代わりに alt テキストが表示されます。スクリーンリーダーを使用している人にとって alt テキストは、ユーザーがサイト上で画像に関与するときに音声で読み上げられます。したがって、alt テキストに何を書くかは、コンテンツを利用する一部のユーザーに大きな影響を与えます。

テキストは画像を説明するものでなければなりません。そうすれば、画像を見ることができないユーザーも、ページ上で画像を見ている人と同じ体験をテキストで得ることができます。しかし、これは必ずしも単純な作業ではありません。画像の中で最も関連性の高い情報は何でしょうか？すべての画像に alt テキストが必要でしょうか？そして、どうすれば alt テキストがユーザーに最高の体験を提供していることがわかるのでしょうか？このような問題については、次のセクションで説明します。

良い alt テキストの書き方

alt テキストは様々なユーザーにとって有益であり、優れた alt テキストは常に画像などを可能な限り端的に説明することを目指すべきであることが分かったところで、次は実際に優れた alt テキストを書く方法についてご紹介しましょう。まず始めに、 alt テキストを正しく書くための注意点をいくつかご説明します。

やるべきこと

• 画像について説明する： 画像は実際に何を表していますか？何が本質的であるかは文脈に依存する可能性があり、画像の機能とユーザーがそこから得る必要のある情報を考慮する必要があります。例えば、e コマースサイトの靴の色のように、ユーザーが画像の内容に関する特定の情報を必要としているのか、あるいは、画像は単に記事を詳しく説明しているに過ぎず、より具体的でない説明が必要なのか、などです。
• 簡潔に： わかりやすく、要点をまとめましょう。スクリーンリーダーを使用する場合、多くの単語や長い説明は邪魔になる可能性があります。ユーザーは、ページをざっと読みながら、画像の概要を知りたいだけかもしれません。さらに、画像にテキストがある場合は、必ず alt テキストにその旨を記述しましょう。
• alt テキストを正しく終わらせる： 他の文章と同じように、alt テキストもピリオドで終わらせましょう。スクリーンリーダーを使用している人は、リーダーによって加えられた間を読むことで説明が終わったことを知ることができます。さらに、ビジュアルがイラスト、チャート、グラフなど画像以外のものである場合は、情報を提供するのがよいでしょう。スクリーンリーダーはすでにデフォルトでその情報を提供しているので、「の写真」や「の画像」と言う必要はありませんが、関連性があれば、alt テキストの説明の後に「イラスト」や「グラフ」を追加するのは親切でしょう。

やるべきでないこと

• 画像とは関係のない alt テキストを書かないこと： これは当たり前のことのように思えますが、多くのウェブサイトでは、画像そのものとは何の関係もない alt テキストを画像に記載しています。これには写真家の名前や記事のタイトルが含まれ、最悪の場合、alt テキストが単に画像のファイル名になっていることもあります。
• alt テキストにキーワードを詰め込まない： alt テキストは SEO に効果的であることはすでにお伝えした通りですが、これは正しく使用した場合に限ります。alt テキストは、複数のキーワードをページに忍び込ませる手軽な手段ではないのです。後ほど説明するように、これは避けるべきで、実際には SEO に役立つというよりもむしろ害になります。
• 重複する画像や装飾的なコンテンツには、決して alt テキストを使用しない： 何よりもまず、アクセシビリティとユーザビリティを確保するために alt テキストを提供していることを忘れてはいけません。これは、ソーシャルメディアのプロフィール写真のような繰り返し表示される画像や、背景画像のような単なる装飾的なコンテンツによく見られます。ユーザーはコンテンツを理解するためにこの情報を必要としませんし、支援デバイスが本質的でない画像を説明するのに時間がかかってしまいます。alt テキストフィールドは決して削除すべきではありませんが、その代わりに「null」を使用し、alt テキストフィールドにスペースを空けておくようにしましょう。
• alt テキストの追加を人工知能（AI）だけに頼らない： AI の技術はかなり向上していますが、説明的な情報という点ではまだまだです。そのため、常に手動で alt テキストをチェックし、AI が見落としたかもしれない関連情報を追加するようにしましょう。

alt テキストとアクセシビリティ

すべてのユーザー、特に視覚障害のあるユーザーやスクリーンリーダーを使用するユーザーにとって、alt テキストがコンテンツをアクセシブルにするための重要な機能であることは、もう明らかでしょう。実際、alt テキストはアクセシビリティにとって非常に重要であり、ウェブコンテンツアクセシビリティガイドライン（WCAG 2.1）では、alt テキストを最初のガイドラインとしています：

ユーザーに提示されるすべての非テキストコンテンツには、同等の目的を果たす代替テキストを必ず用意する

引用文にあるように、このガイドラインはテキスト以外のすべての要素に言及しており、この記事で述べたように、alt テキストは画像に限らず、イラストや図表も含まれます。また、alt テキストは自分のウェブサイト上のコンテンツに限定されるものではありません。アクセシブルなオンラインプロフィールを実現するためには、すべてのビジュアル要素に、すべてのプラットフォームで意味のある alt テキストを付ける必要があります。自社のウェブサイト以外にも、画像やその他のビジュアルを使用したソーシャルメディアへの投稿など、あらゆるプラットフォームやコンテンツが含まれます。Facebook、Instagram、LinkedIn、Twitter で alt テキストを設定するガイドについては、DigitalMaas の手順をまとめたガイド（英語）をご参照ください。

alt テキストと SEO

ビジュアル要素をテキストで説明することで恩恵を受けるのは人間だけではありません。alt テキストは、正しい使い方をすれば、SEO にも大いに役立ちます。何より素晴らしいのは、SEO のための alt テキストの正しい使い方は、アクセシビリティのための alt テキストの正しい使い方でもあるということです。つまり、コンテンツを一方に最適化すれば、もう一方も改善されるということ。検索エンジンはキーワードだけでなく、ユーザビリティに基づいてウェブサイトをランク付けするからです。関連キーワードを使いながら、画像を説明する alt テキストを目指しましょう。良い alt テキストを選ぶための Google のアドバイスはこちらでご確認ください

alt テキストを記述する際は、キーワードを適切に使用し、ページのコンテンツの文脈に沿った、有益で情報量の多いコンテンツを作成することに注力しましょう。alt 属性をキーワードで埋め尽くすこと（キーワードの乱用とも呼ばれる）は、ネガティブなユーザー体験につながり、あなたのサイトがスパムとみなされる可能性があるため避けましょう。

したがって、キーワードに合うように alt テキストを最適化することをお勧めしますが、ただし画像がそれを許可している場合に限ります。キーワードやキーワードのリストだけを alt テキストとして使用することは、アクセシビリティと最終的な SEO の両方に害を及ぼす可能性があるため、好ましいやり方ではありません。

この alt テキストの説明とクイックガイドが少しでもお役に立ち、よりアクセシブルなウェブサイトとオンラインコンテンツ、そして SEO の向上への一助となれば幸いです。アクセシビリティに関するアドバイスをご希望の方は、ぜひ Monsido をご活用ください。