HTMLのtitle属性の正しい使い方のまとめ

初心者の友達の多くは、title と alt の 2 つの属性について混乱しています。彼らは、img 要素の alt 属性を置き換えたり、画像のタイトルとして使用したりすることがよくあります。これらの行為を理解していない友達は禁止されています。この記事を参照できます。 携帯電話、タブレット、支援技術を使用するユーザーに対して何かを非表示にし、キーボード ユーザーにのみ表示したい場合は、title 属性を使用します。
詳細

HTML自体のtitle属性に問題があります。問題は、14 年以上使用されているにもかかわらず、いくつかの重要な点で十分なパフォーマンスを発揮していないことです。タッチ デバイスの台頭により、この属性の役割はさらに減少しました。 title 属性のアクセシビリティは、ブラウザのサポート、スクリーン リーダーのサポート、および作成者の注意の欠如により問題になっています。
次の状況ではサポートがないため、title 属性が冗長になります:

モバイル ブラウザーで Web コンテンツ情報にアクセスするユーザーの場合。通常、title 属性の内容はデスクトップ ブラウザにプロンプ​​ト メッセージとして表示されます。私の知る限り、ツールチップの表示をサポートするモバイル ブラウザはありません。また、title 属性のコンテンツにアクセスする視覚的な方法は他にありません。
マウスが使えない方向けの情報です。通常、title 属性の内容はデスクトップ ブラウザにプロンプ​​ト メッセージとして表示されます。プロンプト情報の動作には 10 年以上の歴史がありますが、キーボードを使用してタイトル属性を表示する方法を実装したブラウザはありませんでした。
ほとんどの HTML 要素でこれを使用して、さまざまな支援技術を使用している人々に情報を提供します。私の知る限り、スクリーン リーダーはタイトル属性情報へのアクセスをサポートしていません。

次のように、title 属性はユーザーフレンドリーではありません

モバイルユーザー
キーボードのみのユーザー
拡大鏡を使用しているユーザー
スクリーンリーダーユーザー
細かい運動能力に障害のあるユーザー
認知障害のあるユーザー

title 属性が使用される例便利:

Frame 要素または iframe 要素にラベルを追加します:

表示されるテキスト ラベルを直接使用することは冗長になります:

データテーブルのラベルコントロール。

title 属性が役に立たない、またはほとんど役に立たない例:

テキストにできない追加情報をリンクまたは周囲のコンテンツに追加します:

代わりに、そのような情報はリンク テキストの一部として、またはリンクの隣に含める必要があります。
リンク テキストと同じ情報を指定します:
newsletter
リンクのコンテンツを title 属性としてコピーしないことをお勧めします。これは実際には何もしないのと同じです。
画像のタイトル:
alt="城には 2 つの塔と 2 つの壁があります。"> ;おそらくタイトル情報が最も重要な情報であり、デフォルトですべてのユーザーがアクセスできるはずです。その場合、このコンテンツは画像のすぐ隣にあるはずです。
表示されているテキスト ラベルを削除して、フォームのラベルを置換するために使用されます:

title 属性が含まれているため、スクリーン リーダー ユーザーはフォーム要素のラベルにアクセスします。アクセシビリティ API (テキスト ラベルがラベル要素を使用する場合はサポートされません)。他の多くのユーザーには当てはまりません。可能な限り、表示されるテキスト ラベルを含めることをお勧めします。
表示されるラベルのコンテンツと同じ情報をフォーム要素に指定します:
name 表示されているラベル テキストを複製することは、ユーザーの認知ノイズを大量に追加することを除いて不可能です。やめてください。表示されるラベル テキストを繰り返すことは、迷惑な認知ノイズを大量に追加する以外の目的はないようです。この使用はやめてください。
フォーム要素に追加のディレクティブを提供します:
name ディレクティブは、フォーム要素を正しく使用するために非常に重要です。すべてのユーザーが確実に読めるように、要素の周囲にテキスト情報を提供してください。
略語の拡張として:
W3C
abbr 要素の title 属性はスクリーン リーダー ソフトウェアでサポートされていますが、サポートされていないため、使用には依然として問題があります。他のユーザーグループも利用できます。文書内で略語が初めて登場する場合は、フルネームをテキスト形式で提供するか、フルネームの用語集を提供することをお勧めします。これは、title 属性が使用できないということではありません。これには制限があり、フルネームをテキスト形式で指定する必要があるためです。

HTML 5.1 には、title 属性の使用に関する一般的なアドバイスが含まれています:

多くのユーザー エージェントは仕様で要求されているようにこの属性を表示できないため (キーボードのみのユーザーやタッチ スクリーン ユーザーを除き、プロンプト情報の表示を引き起こすためにマウス ポインタ デバイスを必要とするなど)、現在 title 属性に依存することは推奨されていません

title 属性を使用する img 要素の alt 属性を置き換えたり、画像のタイトルとして使用したりすることは禁止されています

多くのユーザー エージェントではこの属性のアクセシビリティ サポートが弱いため、title 属性に依存することは現在禁止されています...

詳細修正方法 HTMLのtitle属性の使い方まとめの関連記事は、PHP中国語サイトにご注目ください！