HTML の title 属性を正しく使用するためのヒント

HTML の title 属性を正しく使用するためのヒント
コンテンツを携帯電話、タブレット、支援技術のユーザーから非表示にし、キーボードのユーザーにのみ表示する場合は、title 属性を使用します。
詳細

HTML の title 属性自体に問題があります。問題は、14 年以上も私たちと共にあるにもかかわらず、いくつかの重要な点で不十分であるということです。タッチデバイスの登場により、このプロパティの有用性はさらに低下しました。ブラウザのサポート、スクリーン リーダーのサポート、開発者の注目が不足しているため、タイトル属性のアクセシビリティは少し残念なものになっています。
次の場合には、サポートされていないため、 title 属性は不要になります。

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

タイトル属性は次のようにユーザーフレンドリーではありません

携帯電話ユーザー キーボードのみを使用する人 画面拡大鏡を使用する人 スクリーンリーダーを使用する人 微細運動能力に障害のある人 認知障害のある人

便利なタイトル属性の例:

フレームまたは iframe 要素にラベルを付けるには:
<frame title="ナビゲーション">
特別な状況でのみ表示され、プログラミングが必要なラベルを提供します。表示されるテキスト ラベルを直接使用するのは冗長です。
<input type="text" title="検索"> <input type="submit" value="検索">
データ グリッド内のラベル コントロール。

title 属性が役に立たない、または用途が限られている例:

テキストとして利用できないリンクまたは周囲のコンテンツに追加情報を追加するには:
<a href="newsletter.PDF" title="PDF ファイル、サイズ 1 mb">ニュースレター</a>
代わりに、そのような情報はリンク テキストの一部として、またはリンクの横に含める必要があります。
リンク テキストと同じ情報を提供します。
<a href="newsletter.PDF" title="newsletter">ニュースレター</a>
リンクの内容をタイトル属性としてコピーしないことをお勧めします。これは実際には何もしないことと同じです。
画像に使用するタイトル:
<img src="castle1858.jpeg" title="キャンバスに油絵の具で描いた作品。マリア・タウル、1858 年。"
alt="城には現在 2 つの塔と 2 つの壁があります。">
おそらく最も重要な情報であり、デフォルトですべてのユーザーがアクセスできる必要があります。もしそうなら、このコンテンツは画像のすぐ隣に配置する必要があります。
フォーム ラベルを置き換え、表示されているテキスト ラベルを削除するために使用します。
<input type="text" title="名前">
タイトル属性はアクセシビリティ API で属性名としてリストされているため、スクリーン リーダー ユーザーはフォーム要素のラベルにアクセスできます (テキスト ラベルにラベル要素を使用する場合は、これはサポートされません)。他の多くのユーザーはそうしません。可能な場合は、目に見えるテキスト ラベルを含めることをお勧めします。
フォーム要素の表示ラベル コンテンツと同じ情報を提供します。
<label for="n1">名前</label> <input type="text" title="名前" id="n1">
目に見えるラベルテキストを繰り返すと、ユーザーの認知ノイズのレベルが上がるだけです。やめなさい。目に見えるラベル テキストを繰り返すことは、迷惑な認知ノイズを追加する以外に何の役にも立たないように思われるので、使用を中止してください。
フォーム要素に追加のディレクティブを提供します:
<label for="n1">名前</label> <input type="text" title="大文字を使用してください。"id="n1">
フォーム要素を正しく使用するために指示が不可欠な場合は、すべてのユーザーが読めるように要素の周囲にテキストを配置します。
略語の拡張として:
<abbr title="ワールド ワイド ウェブ コンソーシアム">W3C</abbr>
abbr 要素の title 属性はスクリーン リーダー ソフトウェアでサポートされていますが、他のユーザー グループがアクセスできないため、使用には依然として問題があります。略語の完全な名前は、文書内で初めて登場するときにテキスト形式で提供するか、用語集で提供することをお勧めします。これは、title 属性が使用できないという意味ではありませんが、制限があり、完全なタイトルをテキスト形式で提供する必要があります。

HTML 5.1 には、title 属性の使用に関する一般的な推奨事項が含まれています。

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

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

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

<<:  Vueはアコーディオン効果を実装する

>>:  Docker+Selenium Grid に基づく技術アプリケーションをテストするためのサンプル コード

推薦する

Dockerは公式Redisイメージをインストールし、パスワード認証を有効にします

参考: Docker 公式 Redis ドキュメント1. 特別なバージョン要件がある場合は、redi...

CSSとHTMLを組み合わせる4つの方法

(1)各HTMLタグには属性スタイルがあり、CSSとHTMLを組み合わせている。 <div s...

CSS における px、em、rem、pt の特徴、違い、変換について詳しく説明します。

コンセプト紹介: 1. px (ピクセル):仮想的な長さの単位で、コンピュータ システムのデジタル画...

MySQLのexplain型の詳細な説明

導入:多くの場合、さまざまな選択ステートメントを使用して必要なデータを照会した後、多くの人は作業が正...

Mac VMware Fusion CentOS7 静的 IP 構成チュートリアル図

目次CentOS7をインストールする静的IPの設定viを使用してファイルを編集するCentOS7をイ...

CSS スタイルで一般的なグラフィック効果を示すサンプルコード

一般的な基本グラフィックと私が遭遇するいくつかの小さなアイコンについて簡単に説明します。以下は CS...

MySQL XA で分散トランザクションを実装する方法

目次序文XA プロトコルMySQL XA で分散トランザクションを実装する方法序文MySQL が単一...

HTML+CSS マージテーブル境界線サンプルコード

table タグと td タグに境界線を追加すると、デフォルトでは次のように二重境界線が使用されます...

Dockerはイメージ名とTAG操作の名前を変更します

docker イメージを使用する場合、以下に示すように、REPOSITORY と TAG の両方が ...

JavaScript PromiseとAsync/Awaitの詳細な説明

目次概要4つの例例1: 誕生日で説明する約束の基本例2: 数字当てゲーム例3: Web APIから国...

Echarts バー水平棒グラフのサンプルコード

目次横棒グラフデータとスタイルを動的に更新するeChartsの幅と高さの適応の問題を解決する縦棒グラ...

DockerにRabbitMQを素早くインストールする方法

1. 画像を取得する #Webコントロールページを含むバージョンを指定します docker pull...

MySQL ストレステストツール Mysqlslap の使用

1. MySQL独自のストレステストツールMysqlslap mysqlslap は、mysql に...

さまざまなブラウザに対応するためにCSSで指定フォント@font-faceを導入する際の問題

Web ページを作成するときに、特定のフォントを使用したい場合は、 @font-faceを介して参照...

Javascript Bootstrapのグリッドシステム、ナビゲーションバー、カルーセルの詳細な説明

目次ブートストラップと関連コンテンツの紹介グリッドシステムネストされた列列オフセット列の並べ替えナビ...