Labels or Instructions3.3.2 ラベル又は説明（レベルA）

説明的なラベルを提供する

フォームフィールドに対して具体的で明確なラベルを提供し、ユーザーが入力すべき内容を正確に理解できるようにします。

<label for="username">ユーザー名 (半角英数字)</label>
<input type="text" id="username" name="username">

aria-describedbyプロパティを使用する

ユーザインターフェースコントロールに対して、追加の説明を提供するためにaria-describedbyプロパティを使用します。これにより、スクリーンリーダー利用者が必要な情報を得やすくなります。

<label for="email">メールアドレス</label>
<input type="email" id="email" aria-describedby="emailHelp">
<span id="emailHelp">例: user@example.com</span>

aria-labelledbyを使用する

フォームフィールドに対して具体的で明確なラベルを提供し、ユーザーが入力すべき内容を正確に理解できるようにします。

<label id="addressLabel">住所</label>
<input type="text" aria-labelledby="addressLabel addressDescription">
<span id="addressDescription">例: 東京都目黒区中町2-44-12</span>

グルーピングロールを使用する

関連するフォームコントロールを特定するために、role=”group”やrole=”region”などのグルーピングロールを使用します。

<div role="group" aria-labelledby="shippingAddress">
  <h3 id="shippingAddress">配送先住所</h3>
  <label for="street">通り</label>
  <input type="text" id="street" name="street">
  <label for="city">市区町村</label>
  <input type="text" id="city" name="city">
</div>

期待されるデータ書式及び入力例を提供する

フォームフィールドの近くに、期待されるデータの書式や入力例を提供し、ユーザーが正しい形式で入力できるようにします。

<label for="phone">電話番号</label>
<input type="tel" id="phone" name="phone" placeholder="090-1234-5678">

必須の入力を記述するテキストの説明を提供する

フォーム全体やテキストフィールドの上部に、必須入力フィールドについての説明を明示します。

<p>必須項目には<span class="required">*</span>が付きます</p>
<label for="fullname">氏名 <span class="required">*</span></label>
<input type="text" id="fullname" name="fullname" required>

必須項目を特定するためのテキスト説明を提供する

フォーム内で必須項目が入力されていない場合、明確なテキスト説明を提供し、ユーザーに通知します。

fieldset要素及びlegend要素を使用する

フォームコントロールのグループに関する説明を提供するために、fieldset要素とlegend要素を使用します。

<fieldset>
  <legend>連絡先情報</legend>
  <label for="phone">電話番号</label>
  <input type="tel" id="phone" name="phone">
</fieldset>

title属性を使用する

label要素が使用できない場合に、フォームコントロールを特定するために、title属性を使用します。

<input type="text" name="username" title="ユーザー名 (半角英数字)">