代替テキスト（alt属性）の目的と重要性

ユーザーにとって「分かりやすいWebサイト」を作成する上で、代替テキスト（alt属性）は重要な要素です。今回は代替テキストの目的と設定の注意点についてご紹介します。

代替テキストとは

Webサイトに含まれる画像や動画など代わりになるテキストの事です。ブラウザによっては何らかの原因で表示されない時や、スクリーンリーダーや音声ブラウザの為に情報を取得します。又画像に代替テキストを設定することで、検索エンジンのクローラーが画像の内容を理解し、「画像検索」などに表示されるようになります。その為には画像の内容に沿った意味を持つキーワードを入力する事が大切です。ユーザーに分かりやすいサイトを作る事はクローラーにとっても分かりやすいサイトになり結果的にSEO強化に繋がります。

代替テキストの設定のポイント

①画像と関係のあるキーワードを設定

⇒ユーザーの混乱を避けるためにも適切な画像の内容をテキスト入力することです。

②キーワードをむやみに入れすぎない

⇒SEOを狙いすぎて過剰にキーワードを詰め込みすぎないようにする。又画像の意図と異なる設定をしない。検索エンジンからスパム行為とみなされる可能性もあります。

適切なキーワード代替テキスト：【滑り台を滑る女の子の写真】

過剰なキーワード代替テキスト：【滑り台、女の子、子供服、遊ぶ、成長】

③複数の異なる画像に同じ代替テキストを設定しない

④意味を持たない装飾画像には代替テキストの設定をしない

⇒罫線や背景画像といったデザイン装飾など意味の持たない画像の場合、空白にします。HTMLの場合は【alt＝""】と記述します。

【華やかさを演出する為の画像の場合】

※デザイン装飾が目的の画像であれば、写真であっても代替テキストを空にして問題ありません。

使いやすさを考えながらWebサイトを作り上げることができれば、その取り組みがいつも間にか「Webアクセシビリティ」の向上にも繋がっていくことになります。「Webアクセシビリティ」とは視覚的に障害がある方でも音声ブラウザなどで情報を得る、Webを使えるようにする事を意味します。

Webアクセシビリティの向上に役立つツールとして、Googleが提供している拡張機能の品質チェックツール「Lighthouse」の利用をお勧めします。「Performance」「Accessibility」「Best Practices」「SEO」「Progressive Web App」の５項目がチェックでき、サイトの改善すべき場所と改善の提案を見る事が可能です。アクセシビリティ以外にもサイトの改善にも役立ちます。

【画像のファイル形式についてはこちら】

WebP（ウェッピー）とは？

---

最後までご覧いただきありがとうございます。Webサイト制作のお役に立てば幸いです。