HTMLimgタグのalt属性とtitle属性の使い方入門_HTML/Xhtml_Webページ制作

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

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

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

alt 属性

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

Alt 属性 (「ラベル」ではなく「属性」であることに注意してください) には、画像と画像ホットスポットに必要な置換命令が含まれています。 img、area、input 要素（アプレット要素を含む）でのみ使用できます。 input 要素の場合、alt 属性は送信ボタンの画像を置き換えることを目的としています。例: 。

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

代替テキストを作成する前に、そのテキストが実際に画像を見ることができない人に情報を提供するものであるか、文脈の中で意味をなすものであるかをよく考えてください。装飾的な画像の場合は、「青い箇条書き」や「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 属性。

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

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

title 属性の有効な使用法は、特にリンク自体がリンクの目的についてあまり明確でない場合に、リンクに説明テキストを追加することです。こうすることで、訪問者はリンクの行き先を知ることができ、まったく興味のないページを読み込むことがなくなります。もう 1 つの潜在的な用途は、日付やその他の重要ではない情報など、画像に追加の説明情報を提供することです。

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



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

title 属性については、厳密な使用方法を指示することが困難です。私は主に、同じページ上に同じリンク テキストがあり、別のリンク先ページにあるなど、一目瞭然ではないリンクでこれを使用します。一部のボタンまたはフォーム要素には、より説明的なテキストが提供される場合があります。

長い説明

画像に alt 属性の制限を超える長い説明が必要な場合、いくつかのオプションがあります。

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

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

説明リンク (D リンク) は、longdesc を補足するために使用できます。説明リンクは、代替テキストを含むページへの通常のリンクです。リンクは画像の横に配置され、すべてのブラウザで利用できます。その有効性についてはさまざまな意見があり、個人的にはこのメモは好きではありません。 WCAG も、WCAG 2.0 の HTML テクニックの草稿では、説明リンクは「非推奨」になっています。

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