用語辞典
Dictionary
alt属性（オルトしょぞく、alternative textの略称）は、HTMLで画像タグ () に対して設定される属性で、画像の代替テキストを指定するために使用されます。alt属性は、主に次の3つの目的で利用されます。
アクセシビリティの向上: 視覚に障害があるユーザーは、スクリーンリーダーという支援技術を使用してウェブページの内容を読み上げてもらっています。alt属性にテキストを設定しておくと、スクリーンリーダーがそのテキストを読み上げ、ユーザーに画像の内容を伝えることができます。これにより、視覚的な情報を理解できないユーザーにとっても、ウェブコンテンツのアクセシビリティが向上します。
画像が表示されない場合の代替情報: 画像の読み込みが失敗した場合や、ユーザーが画像の表示を無効にしている場合、alt属性に指定されたテキストが代わりに表示されます。これにより、画像が表示されなくても、ユーザーはその内容を理解する手がかりを得ることができます。
SEO（検索エンジン最適化）の強化: 検索エンジンは画像の内容を直接解析できないため、alt属性を利用して画像の内容を理解します。画像に適切なalt属性を設定することで、検索エンジンに画像の内容を伝えられ、画像検索の結果に表示される可能性が高まります。また、alt属性にキーワードを自然に含めることで、ウェブページ全体のSEO対策にも寄与します。ただし、キーワードを詰め込みすぎると、検索エンジンからペナルティを受ける可能性があるため、コンテンツに関連した適切なテキストを設定することが重要です。
alt属性の使い方
HTMLで画像を表示する際に、
タグに alt 属性を追加します。以下はその例です。
html
コードをコピーする
このコードでは、画像が表示できない場合やスクリーンリーダーが使用された場合に、「美しい山の風景」というテキストがユーザーに伝えられます。
alt属性の書き方のポイント
簡潔で具体的に: 画像の内容を簡潔かつ具体的に説明するテキストを設定します。画像がどのようなものかを端的に伝えることが大切です。
キーワードの自然な使用: SEO対策としてキーワードを含めるのは良いですが、不自然にならないようにします。コンテンツと関連性のある説明にすることで、ユーザーと検索エンジンの双方に役立ちます。
装飾目的の画像には空のalt属性: 装飾目的（デザイン要素として使われている画像）の場合、alt属性を空にしてスクリーンリーダーに無視させます。例として、alt="" と設定します。これにより、ユーザーに不要な情報を伝えず、ページのアクセシビリティを保つことができます。
alt属性の例
商品画像の場合: 
図表の場合: 
ボタン画像の場合: 
alt属性はウェブページのアクセシビリティを高めるだけでなく、SEOの観点からも重要です。適切に設定することで、より多くのユーザーに情報を届けることができます。
