「Attributes.for」廃止のお知らせ：HTML5でラベルと入力要素を関連付ける新しい方法
Attributes.for 属性は、ラベル要素の for 属性と入力要素の id 属性の値を一致させることで機能しました。つまり、ラベル要素の for 属性に指定された値が、入力要素の id 属性と一致する場合、ラベル要素はその入力要素に関連付けられました。
Attributes.for 属性が廃止された理由は、以下の通りです。
- HTML5の新しい機能
HTML5では、aria-labelやaria-labelledbyなどの新しい属性が導入され、ラベルと入力要素をより分かりやすく関連付けることができるようになりました。 - アクセシビリティの問題
Attributes.for 属性は、スクリーンリーダーなどのアクセシビリティツールにとって分かりにくかったためです。
Attributes.for 属性の代わりに、以下の方法でラベルと入力要素を関連付けることができます。
- aria-labelledby 属性
ラベル要素の aria-labelledby 属性に、ラベル要素の id 属性の値を指定します。 - aria-label 属性
ラベル要素の aria-label 属性に、ラベルのテキストを指定します。 - id 属性と for 属性
ラベル要素の for 属性に、入力要素の id 属性の値を指定します。
Attributes.for 属性を使用する代わりに、これらの新しい方法を使用することをお勧めします。
例
HTML5 以前
<label for="email">Email:</label>
<input type="email" id="email">
<label for="email">Email:</label>
<input type="email" id="email" aria-label="Email">
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Attributes.for の例</title>
</head>
<body>
<h1>Attributes.for の例</h1>
<form action="#">
<label for="name">名前:</label>
<input type="text" id="name" name="name">
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">
<input type="submit" value="送信">
</form>
</body>
</html>
このコードは以下の動作をします。
<!DOCTYPE html>宣言は、HTML5 ドキュメントであることを示します。<head>要素は、ドキュメントのメタデータを含みます。<meta charset="UTF-8">メタタグは、ドキュメントの文字エンコーディングが UTF-8 であることを示します。<title>Attributes.for の例</title>タグは、ドキュメントのタイトルを定義します。<body>要素は、ドキュメントのコンテンツを含みます。<h1>Attributes.for の例</h1>見出しは、ページのタイトルを表示します。<form action="#">要素は、フォーム要素を定義します。action属性は、フォームが送信されたときに送信される URL を指定します。<label for="name">名前:</label>ラベル要素は、name入力要素に対応するラベルテキストを表示します。for属性は、このラベルがname入力要素に関連付けられていることを示します。<input type="text" id="name" name="name">入力要素は、ユーザーが入力できるテキストフィールドです。type属性は、入力フィールドの種類をtextに設定します。id属性は、入力要素に一意の ID を割り当てます。name属性は、入力要素の名前を指定します。<label for="email">メールアドレス:</label>ラベル要素は、email入力要素に対応するラベルテキストを表示します。for属性は、このラベルがemail入力要素に関連付けられていることを示します。<input type="email" id="email" name="email">入力要素は、ユーザーが入力できる電子メールアドレスフィールドです。type属性は、入力フィールドの種類をemailに設定します。id属性は、入力要素に一意の ID を割り当てます。name属性は、入力要素の名前を指定します。<input type="submit" value="送信">入力要素は、フォームを送信するための送信ボタンです。type属性は、入力フィールドの種類をsubmitに設定します。value属性は、ボタンに表示されるテキストを指定します。</body>要素は、ドキュメントの本文を終了します。</html>タグは、HTML ドキュメントを終了します。
この例では、aria-label と aria-labelledby 属性を使用して、ラベル要素と入力要素を関連付けます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>aria-label と aria-labelledby の例</title>
</head>
<body>
<h1>aria-label と aria-labelledby の例</h1>
<form action="#">
<label id="nameLabel">名前:</label>
<input type="text" id="name" name="name" aria-label="名前">
<label id="emailLabel">メールアドレス:</label>
<input type="email" id="email" name="email" aria-label="メールアドレス">
<input type="submit" value="送信">
</form>
</body>
</html>
<!DOCTYPE html>宣言は、HTML5 ドキュメントであることを示します。<html lang="ja">タグは、
id属性とaria-label属性:
この方法は、最も一般的でシンプルな方法です。
- スクリーンリーダーはこの情報を用いて、入力要素に関連するラベルテキストを読み上げます。
- 入力要素に
aria-label属性を割り当て、ラベル要素のテキストを値として設定します。 - ラベル要素に
id属性を割り当てます。
<label id="name-label">名前:</label>
<input type="text" id="name" aria-label="名前を入力してください">
aria-labelledby属性:
この方法は、より多くの情報を提供したい場合に役立ちます。
- スクリーンリーダーはこの情報を用いて、ラベル要素の内容を読み上げます。
- 入力要素に
aria-labelledby属性を割り当て、ラベル要素のidを値として設定します。 - ラベル要素に
id属性を割り当てます。
<label id="name-label">名前:</label>
<input type="text" id="name" aria-labelledby="name-label">
title属性:
この方法は、古いブラウザとの互換性を保ちたい場合に役立ちますが、アクセシビリティの観点からは推奨されません。
- 一部の古いスクリーンリーダーはこの情報を用いて、ラベルテキストを読み上げることができます。
- ラベル要素に
title属性を割り当て、ラベルテキストを値として設定します。
<label title="名前を入力してください">名前:</label>
<input type="text" id="name">
- スクリーンリーダーの種類や設定によって、ラベルテキストの読み上げ方が異なる場合があります。
- 上記の例では、すべての入力要素に
id属性が割り当てられています。これは、各入力要素が一意に識別されるようにするため重要です。