代替テキスト

読了時間:3分
代替テキスト(Alt テキスト)は、サイトの画像の詳細な説明です。ブラウザやスクリーンリーダーが画像の内容を理解できるように、画像に説明が追加されます。
代替テキストの一例。デモで「NO!」と掲げられたプラカード。ここでは画像内にもその内容を示すテキストが表示されています。

適切な代替テキストを記述する

画像やギャラリーに代替テキストを追加すると、視覚障がいのある方もそれらの内容を理解できるようになります。代替テキストは画像コンテンツの簡単な説明で、スクリーンリーダーで「読む」ことができます
また、代替テキストを追加すると、サイトのアクセシビリティ評価や SEO スコアも向上し、Google でより多くのユーザーにサイトを見つけてもらえるようになります。
アクセシビリティウィザードを使用すると、すばやく簡単にサイトのアクセシビリティを改善することができます。ただし、アクセシビリティウィザードで良い結果を得るためには、サイトに画像を追加する際に代替テキストを追加しておくことをおすすめします。
良い代替テキストを書くためのヒント:
  • 短くする。ディスクリプションは 1行にしてください。
  • 正確にする。意味を明確にしてください。
  • 文脈を大切にする。画像とページの関連性を記入してください。
  • 「...の画像」で始まる説明は避ける。「...の画像」はなくても訪問者に伝わります。

画像に代替テキストを追加する


装飾画像

装飾画像とは、デザイン目的のために使用する画像のことで、サイトのコンテンツとは直接関係しません。
このように、画像が装飾的で、ページ内のテキストと関係していない場合は、画像に代替テキストを追加する必要はありません。アクセシビリティウィザードで画像を装飾としてマークすると、検索エンジンとスクリーンリーダーが自動でそれらの画像をスキップするようになります。
画像を装飾としてマークするには、「この画像は装飾用であり、説明は必要ありません。」横のチェックボックスを選択します。
注意:
代替テキストが設定されていない場合のみ、画像を装飾としてマークすることができます。すでに代替テキストが入力されている画像を装飾としてマークしたい場合は、エディタ内から代替テキストを削除し、再度アクセシビリティウィザードでサイトをスキャンする必要があります。

お役に立ちましたか?

|