【html】画像(img)のaltが表示されない理由と対応方法

「画像にマウスを乗せてもaltのテキストが表示されない!?なんで!?」

画像(img)のaltが表示されない理由と対応方法を解説します。

そもそもaltは表示されないのが普通

「画像にマウスを乗せてもaltのテキストが表示されない」のは普通の状態です。

昔のブラウザではaltが表示されていたこともありましたが、最近のブラウザでは表示されません。

下記はaltを設定していますがマウスを乗せてもテキストは表示されません。

<img alt="子猫が毛布にくるまっている様子" width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg">

まずはaltの意味を確認していきましょう。

altの意味

altは「画像代替文字」です。

主に3つの意味があります。

意味1.画像のリンクが切れたときに表示される

画像代替文字は画像のリンクが切れて表示されないときに画像の代わりに表示される文字です。

逆に言えば画像がちゃんと表示されているなら表示されない文字です。

下記はわざと画像のリンクを切った例です。altが表示されています。

<img alt="子猫が毛布にくるまっている様子" width="300" src="https://csshtml.work/wp-content/uploads/.jpg">

意味2.目の見えない方が利用する

画像代替文字は目の見えない方などがブラウザの読み上げ機能を使うときに読み上げられる文字です。

目の見えない方は画像が見えないためaltで画像の内容を理解します。

意味3.ロボットに伝える

画像代替文字はロボットに画像の内容を伝える文字です。

ここでいうロボットとはgoogle検索などの検索エンジンの周回ボットなどです。

現時点ではロボットは画像内容を理解できないため、文字で伝える必要があります。

当然SEOにも有利です。とはいえ過信してはいけません。通常のテキスト程度と思っておきましょう。

適切なaltとは

altのテキストを入力するときは「画像の代わりにどんなテキストが表示されていれば伝わるか」考えると適切なテキストがわかるでしょう。

なお、不要なのであれば下記のようにaltを空欄にできます。

<img alt="" width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg">

画像(img)の説明を表示させる方法

「そうはいっても画像の説明を伝えたいんだ！」というアナタへ、画像(img)の説明を表示させる方法を紹介します。

方法1.title属性を記載

「画像にマウスを乗せたとき、テキストを表示させたい」のであればtitle属性を設定しましょう。

下記画像はtitle属性を設定した例です。マウスを乗せるとテキストが表示されます。

<img title="子猫が毛布にくるまっている様子" alt="子猫が毛布にくるまっている様子" width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg">

title属性を設定した場合でもaltは必要です。

ただし、このtitleですが、基本的には不要です。

方法2.テキストを掲載【オススメ】

ユーザーはわざわざ画像の上にマウスを乗せて待っていてくれません。ましてやスマホの場合「マウスを乗せる」という行為ができません。

よって画像の説明をしたいのであれば直接テキストを表示させることをオススメします。

<img alt="" width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg">
<p>子猫が毛布にくるまっている様子</p>

テキストを表示させるとき、altは空白にしましょう。

altに同じ説明テキストを載せた場合、同じテキストが2度あることになり、日本語として不自然です。

【まとめ】画像(img)のaltが表示されない理由と対応方法

そもそもaltは表示されないのが普通。

altの意味

1. 意味1.画像のリンクが切れたときに表示される
2. 意味2.目の見えない方が利用する
3. 意味3.ロボットに伝える

画像(img)の説明を表示させる方法

1. title属性を記載
2. テキストを掲載

以上、画像(img)のaltが表示されない理由と対応方法でした。