alt とは
- ここで説明する alt とは次の語句からなる HTML 要素の属性です。
- alternative
- 読み: オルタナティブ
意味: 選択肢、代わりになるもの
alt 属性の概要
HTMLのimg要素で使用される属性です。
閲覧ユーザーの環境やブラウザの設定によっては画像が閲覧できない場合や描画されない場合もあります。
そのような環境下でも、その情報がユーザーに正しく理解されるように代替テキストによって説明を行う為の属性です。
テキストブラウザでは画像ではなくalt属性に記載された内容がテキストとして表示されます。また、音声読み上げブラウザでは、
その代替テキストが読み上げられることになります。
img要素で画像を表示する場合は、alt属性をつけて適切な説明を記述することをお勧めします。
SEOの基本は色々な閲覧ユーザーの利便性を考慮することにあると言われています。
また、サーチエンジンの画像検索において、この属性のテキストが関係すると思われます。
サンプルコードと実行結果
このサンプルの結果を見るためには、テキストブラウザを使用するか、ブラウザの設定で画像を表示しないようにする必要があります。
しかし正確な結果を観れないとしてもサンプルとして疑似的な結果を表示しておきますので参考にしてください。
サンプルコード: HTML
<body>
<img src="./email.png" alt="E-Mailをイメージした紙飛行機の画像">
</body>
疑似結果:
alt 属性と SEO
Google の 「 検索エンジン最適化スターターガイド 」 には alt 属性について以下のよう書かれています。
画像はサイトを構成する単純な要素と考えているかもしれませんが、最大限に活用しましょう。
すべての画像には個別のファイル名と alt 属性を持たせることができるので、この点を有効に利用すると良いでしょう。
alt 属性は何らかの理由によって画像が表示されないときに、代わりのテキストを示してくれるものですこのような属性を使うのは、 ユーザーが画像を表示しないウェブブラウザ を利用していたり、もしくはスクリーンリーダー のような別の手段でサイトを閲覧していたりする場合に、 alt 属性の代替テキスト（alt テキスト）があれば画像に関する情報を提供できるからです。alt属性を使うもう1つの理由は、画像からリンクを張る場合に、画像の alt テキストがリンクに対するアンカーテキストのように扱われるからです。