HTML img タグの alt 属性と title 属性の使い方の紹介

ブラウザベンダーが標準を曲げて、ルールに従わないことをすると、問題や少なくとも混乱が生じる可能性があります。一例として、Windows 版 Internet Explorer などの一部のブラウザが、大規模なユーザーベースを持つ alt 属性 (多くの場合、誤って alt タグと呼ばれます) を処理する方法が挙げられます。

Alt テキストはツールヒントとしては使用されません。より正確に言うと、画像に関する追加情報を提供するために使用されません。代わりに、要素の追加の説明情報を提供するには、title 属性を使用する必要があります。この情報はほとんどの画像ブラウザでツールヒントとして表示されますが、メーカーはタイトル属性テキストを他の方法で自由にレンダリングできます。

多くの人がこの 2 つのプロパティについて混乱しているようです (この質問は最近 Web Standards Group のメーリングリストでよく聞かれます)。そこで、これらのプロパティの使い方について私の考えを書き留めておきました。

alt属性

alt 属性は、画像、フォーム、またはアプレットを表示できないユーザーエージェント (UA) の代替テキストを指定するために使用されます。置換テキストの言語は、lang 属性によって指定されます。出典: 代替テキストを指定する方法。

Alt 属性 (「タグ」ではなく「属性」という単語に注意) には代替の説明が含まれており、画像と画像ホットスポットに必須です。 img、area、input 要素 (applet 要素を含む) でのみ使用できます。入力要素の場合、alt 属性は送信ボタンの画像を置き換えるために使用されます。たとえば、<input type="image" src="image.gif" alt="Submit" /> です。

alt 属性を使用する目的は、ドキュメント内の画像を見ることができない閲覧者に対してテキストによる説明を提供することです。これには、画像表示をネイティブにサポートしていないブラウザを使用するユーザー、または画像表示をオフにしているブラウザを使用するユーザー、視覚障害のあるユーザー、スクリーンリーダーを使用するユーザーが含まれます。 Alt テキストは、追加の説明テキストを提供するのではなく、画像を置き換えるために使用されます。

代替テキストを書く前に慎重に検討し、画像を見ることができない人々に実際に情報を提供し、文脈上意味を成すものであることを確認してください。装飾画像の場合は、「blue bullet」や「spacer.gif」などの無関係な代替テキストを使用する代わりに、空の値（引用符の間にスペースを入れない alt=""）を使用します。これを省略しないでください。省略すると、一部のスクリーンリーダーが画像ファイル名を直接読み取り、Lynx などのテキストブラウザーが画像ファイル名を表示するため、閲覧者にとって役に立ちません。

テキストを含む画像に代替テキストを設定するのが最も簡単です。通常、画像に含まれるテキストは alt 属性値として使用できます。

代替テキストの長さについては、WCAG 2.0 (Web コンテンツアクセシビリティガイドライン 2.0) の規定を参照してください。

Alt 属性の値は英語で 100 文字未満にする必要があります。または、ユーザーは置換テキストが可能な限り短くなるようにする必要があります。

私はそれを「可能な限り短く、必要なだけ長く」と理解しています。

テキスト要素に alt 属性を使用しないでください。ツールヒントとして表示したい場合でも、その使用方法は意図されていません。私の知る限り、これは Windows 上の IE と古い Netscape 4.* (Windows バージョン) でのみ動作します。 Mac ブラウザではこれをツールヒントとして表示しません。

ブラウザがツールヒントとして代替テキストを表示する場合、alt 属性の誤った使用が推奨されます。表示されない画像の代わりではなく、追加の説明情報として考える傾向があるため、意味のない代替テキストを書き始める人もいます。ツールヒントを表示したくない場合は、alt 属性値を完全に無視することもあります。こうした誤った慣行は、画像を見ることができない視聴者にとって困難を生じさせます。

追加の説明情報や必須ではない情報については、title 属性を使用してください。

タイトル属性

title 属性は、それが設定されている要素に関するアドバイス情報を提供します。
ソース: title 属性。

title 属性は、base、basefont、head、html、meta、param、script、title を除くすべてのタグで使用できます。しかし、それは必要ありません。おそらくそれが、多くの人がいつそれを使うべきか理解していない理由でしょう。

必須ではない追加情報を提供するには、title 属性を使用します。ほとんどのビジュアルブラウザーでは、マウスを特定の要素の上に移動するとタイトルテキストがツールヒントとして表示されますが、タイトルテキストをどのようにレンダリングするかは製造元が決定します。一部のブラウザでは、ステータスバーにタイトルテキストが表示されます。たとえば、Safari ブラウザの初期バージョンなどです。

title 属性の適切な使用法は、特にリンク自体がリンクの目的を明確に伝えていない場合に、リンクに説明的なテキストを追加することです。これにより、訪問者はリンク先のページを知ることができるため、興味のないページが読み込まれることがなくなります。もう 1 つの潜在的な用途としては、日付やその他の重要でない情報など、画像に追加のキャプションを提供することが挙げられます。

title 属性値は alt 属性値よりも長くすることができます。ただし、一部のブラウザでは長いテキスト (ツールヒントなど) が切り捨てられることに注意してください。たとえば、Mozilla ベースのブラウザでは最初の 60 文字しか表示できません。これは Mozilla のバグと考えられており、注意が必要です。

使用前に検討してください

私のアドバイスは、代替テキストを簡潔にしておくことです。ほとんどのアプリケーションでは、空白のままにし、alt="" とします (2 つの引用符の間にスペースがないことに注意してください)。それらの画像について考えてみましょう。それらの画像は、それを見る人々にどのような情報を提供するのでしょうか。それを説明するにはどのような言葉を使うべきでしょうか。あるいは、画像を見ることができない人々にはどのような情報を提供すべきでしょうか。代替テキストを「グレーのスーツと黒のネクタイを着て、ビルの外に立って空を見上げている CEO の写真」とすれば、画像を見ることができない人にとって本当に役立つでしょうか?そう思うなら書いてください。多くの場合、置換テキストは空白のままにしておく方が良いと思います。

title属性に対して厳密な指示を与えることは困難です。私は主に、同じページ上の同じリンクテキストだがリンク先のページが異なるなど、説明が不要であるリンクにこれを使用します。一部のボタンやフォーム要素には、さらに説明的なテキストが提供されることもあります。

詳しい説明

画像に alt 属性に収まらないほど長い説明が必要な場合は、いくつかのオプションがあります。

longdesc 属性を使用すると、画像のテキスト説明を含む別のページへのリンクを提供できます。これは訪問者を別のページにリンクすることを意味しますが、理解が困難になる可能性があります。さらに、longdesc 属性に対するブラウザのサポートは一貫性がなく、あまり良くありません。

longdesc 属性には、別のページにリンクする代わりに、現在のドキュメントの別の部分へのリンク (アンカー) を含めることができます。アクセシビリティの脚注では、Andy Clarke がこの機能の使い方をわかりやすく説明しています。

説明リンク (D リンク) は longdesc を補足するために使用できます。説明リンクは、代替テキストを含むページにつながる通常のリンクです。リンクは画像の横に配置され、すべてのブラウザからアクセスできます。その有効性については多くの意見の相違があり、私は個人的にこのアイデアはあまり好きではありません。 WCAG は、WCAG 2.0 の作業草案 HTML テクニックでも、説明リンクを「非推奨」としてリストしています。

画像の長い説明が閲覧者にとって役立つ場合は、別のページにリンクしたり非表示にしたりするのではなく、同じドキュメント内にそのまま表示することを検討してください。そうすれば誰でも読むことができます。これはシンプルでローテクな方法です。

<<: dockerfile における ENTRYPOINT と CMD の組み合わせと違い

>>: MySQLインデックスとは何ですか？わからない場合は聞いてください