ウェブサイトの画像や動画には、視覚的に障害がある方や画像表示に対応していない環境で閲覧するユーザーには情報が伝わりにくいという問題があります。例えば、スクリーンリーダーなどを使ってウェブサイトを閲覧している場合、非テキストコンテンツを説明するためのテキストが必要になってきます。この説明する為のテキストが代替テキストです。代替テキストは、非テキストコンテンツを説明するためにウェブサイトに含まれるテキストのことであり、アクセシビリティ、SEO、および一般的なユーザーエクスペリエンスの観点から非常に重要な要素です。
ユーザーエクスペリエンス（UX）とは、製品やサービスを利用する際にユーザーが体験する全ての要素を包括的に捉えた概念です。具体的には、製品やサービスの使いやすさ、親しみやすさ、効率性、満足度、信頼性などが含まれます。ユーザーエクスペリエンスは、製品やサービスを提供する側が意識して設計し、改善することで、ユーザーの満足度を高め、競争力を維持することができます。また、ユーザーエクスペリエンスの向上は、ユーザーにとって使いやすく、生産性が高まるというメリットがあります
さらに代替テキストは、視覚的に障害がある方や画像表示に対応していない環境で閲覧するユーザーの方だけでなく、一般的なウェブユーザーにとっても非常に重要です。例えば、ウェブページが読み込まれない場合、代替テキストがあれば、そのページの内容が理解できるようになります。また、代替テキストは、検索エンジンのクローラーが非テキストコンテンツを理解するのを助け、SEO対策としても重要です。
そして代替テキストを適切に書くことは、アクセシビリティにとっても重要な要素です。例えば、代替テキストに必要以上に詳細な説明を含めると、周りの環境やあなた自身の状況によっては説明が理解しにくくなってしまいます。また、代替テキストに関するアクセシビリティの原則に違反する可能性がある場合は、慎重に検討する必要があります。
今回は、代替テキストの目的と重要性、使い方、書き方、実装方法、例外について詳しく解説します。これらをマスターすることで、よりアクセシブルでSEOに強いウェブサイトを作り上げることができます。
代替テキストの目的と重要性
Webサイトに含まれる画像や動画など代わりになるテキストの事です。ブラウザによっては何らかの原因で表示されない時や、スクリーンリーダーや音声ブラウザの為に情報を取得します。又画像に代替テキストを設定することで、検索エンジンのクローラーが画像の内容を理解し、「画像検索」などに表示されるようになります。その為には画像の内容に沿った意味を持つキーワードを入力する事が大切です。ユーザーに分かりやすいサイトを作る事はクローラーにとっても分かりやすいサイトになり結果的にSEO強化に繋がります。
代替テキストの設定のポイント
①画像と関係のあるキーワードを設定
⇒ユーザーの混乱を避けるためにも適切な画像の内容をテキスト入力することです。
②キーワードをむやみに入れすぎない
⇒SEOを狙いすぎて過剰にキーワードを詰め込みすぎないようにする。又画像の意図と異なる設定をしない。検索エンジンからスパム行為とみなされる可能性もあります。
③複数の異なる画像に同じ代替テキストを設定しない
④意味を持たない装飾画像には代替テキストの設定をしない
【華やかさを演出する為だけの画像の場合】
ヒナちゃんデザイン装飾が目的の画像であれば、写真であっても代替テキストを空にしても問題ないという場合もあるんですね。
罫線や背景画像といったデザイン装飾など意味の持たない画像の場合、空白にします。HTMLの場合は【alt＝””】と記述します。
代替テキストの例外
代替テキストは、ほとんどの場合で必要な要素ですが、以下のような例外もあります。
・意味のない画像や装飾的な画像は、代替テキストを空欄にして、スクリーンリーダーが無駄な情報を読み上げることを防ぎます。
・長いテキストを含む画像の場合は、そのまま代替テキストにコピーするのではなく、テキストをページの別の場所に配置し、alt属性には簡潔な説明を記述することが望ましいです。
・音声コンテンツやテキスト以外の非テキストコンテンツについては、代替テキストの代わりに別のアクセシビリティ機能を使用する必要があります。
・さらに、代替テキストは正確で明確であることが重要です。誤解を招くような曖昧な言葉や、冗長であったり、不必要に詳細すぎる説明は避けるべきです。
代替テキストとSEOの関係
代替テキストは、画像やその他の非テキストコンテンツが正しく理解されるようにするだけでなく、検索エンジンのクローラーがページの内容を理解するのを助けます。したがって、代替テキストを適切に書くことは、SEOを向上させるために重要です。
代替テキストとアクセシビリティについて
アクセシビリティの原則に違反する可能性がある場合は、特に慎重に検討する必要があります。例えば、視覚的に障害がある方が見ることができない画像に対して、その画像に関する情報を代替テキストにのみ含めると、視覚的に障害がある方がその情報を取得できないことになります。したがって、代替テキストを含める際には、できるだけ広範な視覚障害のある人に対応できるように注意してください。
使いやすさを考えながらWebサイトを作り上げることができれば、その取り組みがいつも間にか「Webアクセシビリティ」の向上にも繋がっていくことになります。「Webアクセシビリティ」とは視覚的に障害がある方でも音声ブラウザなどで情報を得る、Webを使えるようにする事を意味します。
「Webアクセシビリティ」の向上に役立つツールとして、Googleが提供している拡張機能の品質チェックツール「Lighthouse」の利用をお勧めします。「Performance」「Accessibility」「Best Practices」「SEO」「Progressive Web App」の５項目がチェックでき、サイトの改善すべき場所と改善の提案を確認できます。アクセシビリティ以外にもサイトの改善にも役立ちます。試してみてはいかがでしょうか。
独学でサイト制作やをされる方や初めてWebサイトの制作をされる方のお役に立てば幸いです。