HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLで画像が表示されない場合に代替テキストを表示する方法｜alt属性の使い方

画像が何らかの理由で表示されない場合に備えて、HTMLではalt属性を使って代替テキストを指定できます。画像の読み込みに失敗した場合や、ユーザーが画像を閲覧できない環境では、この代替テキストが代わりに表示されます。

さらに、alt属性はスクリーンリーダー（音声読み上げソフト）がコンテンツを読み上げる際にも活用されるため、視覚に障害のあるユーザーへのアクセシビリティ向上にも大きく貢献します。SEOの観点からも、検索エンジンが画像の内容を理解する手がかりとなるため、適切な代替テキストの設定は重要です。

alt属性の基本的な書き方

alt属性は<img>タグ内に記述します。値には、画像の内容を簡潔かつ正確に説明するテキストを指定しましょう。

コード例

以下のコードを実行すると、HTMLにおけるalt属性の動作を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML alt属性の例</title>
   </head>
   <body>
      <p>シンプルな画像の挿入</p>
      <img src = "https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" alt = "チュートリアルライブラリ" />
   </body>
</html>

ポイント

  • alt属性のテキストは、画像の内容を伝える短い説明文にする
  • 装飾目的の画像には空のalt属性（alt=""）を指定して、スクリーンリーダーに読み飛ばさせるのがベストプラクティス
  • 画像が正常に表示されている場合は、altテキストは画面上には表示されない
  1. 【初心者向け】HTML要素にマウスオーバーしたときにテキスト（ツールチップ）を表示する方法

    はじめに この短いチュートリアルでは、画像やリンクなどのHTML要素にユーザーがマウスを合わせた（ホバーした）ときに、簡単な説明文＝いわゆる「ツールチップ」を表示する方法を解説します。 ツールチップの追加は数秒で完了します。使うのは、HTMLのtitle属性だけです。 ホバー時にテキストを表示する基本の方法 以下は、ルービックキューブの画像を使った基本的な例です。画像の上にマウスを移動して1〜2秒待つと、ルービックキューブに関する追加情報がポップアップ表示されます。 上記の画像要素のHTMLマークアップは次のとおりです。 <img src=url-to-image-file

  2. HTMLのoncut属性でテキスト切り取り時にスクリプトを実行する方法

    oncut属性とはHTMLのoncut属性は、ユーザーが要素のテキストを切り取った（カットした）瞬間にスクリプトを実行するためのイベント属性です。テキスト入力フィールドなどで、ユーザーが切り取り操作を行った際に特定の処理をトリガーしたい場合に活用できます。oncut属性の使用例以下のコードを実行して、oncut属性の動作を確認してみましょう。テキストボックス内の文字を切り取ると、イベントが発火してメッセージが表示されます。<!DOCTYPE html> <html>    <body>       <i