今回はHTMLのtitle属性の使い方とHTMLのtitle属性を使う際の注意点を紹介します。実際の事例を見てみましょう。
携帯電話、タブレット、支援技術を使用しているユーザーに対して何かを隠し、キーボード ユーザーにのみ表示したい場合は、title 属性を使用します。
詳細
HTML自体のtitle属性に問題があります。問題は、14 年以上使用されているにもかかわらず、いくつかの重要な点で十分なパフォーマンスを発揮していないことです。タッチ デバイスの台頭により、この属性の役割はさらに減少しました。 title 属性のアクセシビリティは、ブラウザのサポート、スクリーン リーダーのサポート、および作成者の注意の欠如により問題になっています。
次の状況ではサポートがないため、title 属性が冗長になります:
モバイル ブラウザーで Web コンテンツ情報にアクセスするユーザーの場合。通常、title 属性の内容はデスクトップ ブラウザにプロンプト メッセージとして表示されます。私の知る限り、モバイル ブラウザーはツールチップの表示をサポートしておらず、title 属性のコンテンツにアクセスする視覚的な方法は他にありません。
マウスが使えない方向けの情報です。通常、title 属性の内容はデスクトップ ブラウザにプロンプト メッセージとして表示されます。プロンプト情報の動作には10年以上の歴史がありますが、キーボードを使用してタイトル属性を表示する方法を実装したブラウザはありませんでした。
ほとんどのHTML 要素で使用して、さまざまな支援技術を使用している人々に情報を提供します。私の知る限り、スクリーン リーダーはタイトル属性情報へのアクセスをサポートしていません。
title 属性は次のようにユーザーフレンドリーではありません
モバイルユーザー
キーボードのみのユーザー
拡大鏡を使用しているユーザー
スクリーンリーダーユーザー
細かい運動能力に障害のあるユーザー
認知障害のあるユーザー
title 属性が役立つ例:
フレームまたはラベルの場合iframe 要素:
特別な状況下でプログラムを表示する必要があるラベルを提供する:
データ テーブルの
ラベルControl。
title 属性が役に立たない、またはほとんど役に立たない例:
テキストにできないリンクまたは周囲のコンテンツに追加情報を追加します:
;ニュースレター< ; a>
代わりに、そのような情報はリンクテキストの一部またはリンクの隣にある必要があります。
リンク テキストと同じ情報を指定します:
newsletter
リンクのコンテンツを title 属性としてコピーしないことをお勧めします。これは実際には何もしないのと同じです。
画像のタイトル:
alt="城には 2 つの塔と 2 つの壁があります。"> ;おそらくタイトル情報が最も重要な情報であり、デフォルトですべてのユーザーがアクセスできるはずです。その場合、このコンテンツは
画像の隣にあるはずです。表示されているテキスト ラベルを削除して、フォームのラベルを置換するために使用されます:
title 属性が含まれているため、スクリーン リーダー ユーザーはフォーム要素のラベルにアクセスします。アクセシビリティ API 内の名前 (テキスト ラベルがラベル要素を使用する場合はサポートされません)。他の多くのユーザーには当てはまりません。可能な限り、表示されるテキスト ラベルを含めることをお勧めします。
表示されるラベルのコンテンツと同じ情報をフォーム要素に指定します:
;
一連のユーザー認知ノイズを追加する場合を除き、表示ラベル テキストを複製することは不可能です。やめてください。表示されるラベル テキストを繰り返すことは、迷惑な認知ノイズを大量に追加する以外の目的はないようです。この使用はやめてください。
フォーム要素に追加のディレクティブを提供します:
ディレクティブは、フォーム要素を正しく使用するために非常に重要です。すべてのユーザーが確実に読めるように、要素の周囲にテキスト情報を提供してください。
略語の拡張として:
W3C
abbr 要素の title 属性はスクリーン リーダー ソフトウェアでサポートされていますが、サポートされていないため、使用には依然として問題があります。他のユーザーグループも利用できます。文書内で略語が初めて登場する場合は、フルネームをテキスト形式で提供するか、フルネームの用語集を提供することをお勧めします。これは、title 属性が使用できないということではありません。これには制限があり、フルネームをテキスト形式で指定する必要があるためです。
HTML 5.1 には、title 属性の使用に関する一般的な推奨事項が含まれています:
多くのユーザー エージェントは仕様で要求されているようにこの属性を表示できないため (キーボードのみのユーザーやタッチ スクリーン ユーザーを除き、プロンプト情報の表示を引き起こすためにマウス ポインター デバイスを必要とするなど)、現在 title 属性に依存することは推奨されていません。代わりに title 属性 img 要素の alt 属性、または画像のタイトルとして使用することは禁止されています
多くのユーザーエージェントがこの属性のアクセシビリティに対するサポートが弱いため、title 属性に依存することは現在禁止されています...
Google ブラウジングのラベルと入力間の間隔の問題を解決する方法
HTML のヘッダー タグ メタに更新リダイレクトを実装する方法
フォームは自動的に送信され、ジャンプしますWebページでEnterを押した後のページへ 他のページの解決方法
以上がHTMLのtitle属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
