web-dev-qa-db-ja.com

画像（alt、longdesc、title）のツールチップ上のマウスに使用する必要があります

現在、私のウェブページ画像はalt属性のみを使用しています。
ユーザーは、画像の上にマウスを置いたときにIE8が「ツールチップ」バブルを表示できないと苦情を言います。 Microsoftの Internet Explorer 8の新機能 ページで、

ブラウザがIE8標準モードで実行されている場合、alt属性は画像のツールチップとして表示されなくなりました。代わりに、longDesc属性のターゲットがツールチップとして使用されます（存在する場合）。それ以外の場合、タイトルが表示されます。 alt属性は引き続きMicrosoft Active Accessibility名として使用され、title属性はaltが存在しない場合にのみフォールバック名として使用されます。

また、多くの人がタイトルを使用する必要があることもわかりました。
産業標準（alt、longdesc、またはtitle）を満たすために使用すべきものはどれですか？

htmlaccessibility
2
user20757

多くのCMSは、そのコンテンツをtitle属性とalt属性の両方に配置しますが、それらの属性には異なる意味があります。 titleはツールチップに使用することを明示的に意味しますが、altは（a）視覚障害のあるユーザーに読み取られるもの、（b）何らかの理由で画像が読み込まれない場合にレンダリングされるものです。 1つのテキストのみを記述し、jQueryを使用して複製する場合、次のjQueryコードを使用して、alt属性にそれを記述し、titleにコピーします。

$().ready(function(){
    $('img[alt]').each(function(){
        $(this).attr('title', $(this).attr('alt'));
    }
}

この変更をページ上のすべての画像に適用したくない場合は、必ずimg[alt]ピースを変更してください。たとえば、#content img[alt]を使用して<div id="content">の子孫にのみ適用します。

HTMLでaltよりもtitleを使用するかどうかの決定は、3つの要因に基づいています。まず、アクセシビリティが重要であり、Javascriptが有効になっていることに頼ることができません。第二に、すでにalt属性が設定されているようです。第三に、この場合のツールチップは、将来無効にする可能性のある非標準のユーザーリクエストですが、画像を使用しても、テキストは関連付けられているはずです。

0
michaelcgorman

<img>タグのタイトル属性は、デフォルトでマウスオーバーに表示されるものです。 title属性を使用するか、jQueryプラグインを使用して、マウスホバーに関するより良いツールヒントを作成します。

1
Anagio