HTML画像の代替テキストがホバーに表示されない理由

Microsoft Internet Explorerブラウザとは異なり、Mozilla Firefox、Google Chrome、およびその他のブラウザは、画像の上にマウスを移動したときにalt属性で使用されるテキストを表示しません。 代替テキストは、画像が読み込まれないときにページに表示されるように設計されていますが、タイトルテキストは読み込まれる画像の吹き出しテキストを表示するように設計されています。 Firefox、Chrome、およびその他のブラウザ(Internet Explorerを除く)は、HTMLのW3C標準に準拠しています。これは、画像に吹き出しテキストのtitle属性を含める必要があることを示しています。 そのため、これらのブラウザでは、画像の上にマウスを移動しても代替テキストが表示されません。

マウスを画像の上に置いたときにバルーンテキストを表示するには、次のコード例に示すようにimg HTMLタグに "title"を追加します。

alt属性のみを持つ画像

(吹き出しテキストは表示されません。)

alttitleの両方の属性を持つ画像。

(吹き出しテキストをマウスホバーで表示します。)

Mozilla FirefoxまたはGoogle Chromeを使用している場合、最初の例では、コード内にalt属性のみを含む吹き出しテキストは表示されません。 ただし、2番目の例のようにtitle属性を追加すると、マウスを画像の上に移動したときに吹き出しテキストが表示されます。