要約

すべての入力フォームとカスタムコントロールには、その目的を明確に説明するラベルを付けます。

テクニック

例

例1 — labelの関連付け

for属性は、ラベルが記述する要素のIDを参照するために使用されます。 for属性を使用すると、ラベルは要素の前または後のどこにでも付けられます。

<tr>
   <td>
      <input type="text" id="name"/>
   </td>
   <td>
      <label for="name">Full name</label>
   </td>
</tr>
例 2 — labelのラッピング

labelに、入力／コントロールとラベルの両方を組み込める場合には for属性は省略します。

<label>
   <input type="text" id="name"/>
   Full name
</label>
例 3 — グループ化にfieldsetを使用する

legend要素で、コントロール／入力のセットのラベルを提供します。

<fieldset>
   <legend>Accessibility Features</legend>
   <label>
      <input type="checkbox" name="a11yFeature"
         value="alternativeText"/> Alternative text
   </label>
   <label>
      <input type="checkbox" name="a11yFeature"
         value="longDescription"/> Extended descriptions
   </label>
   …
</fieldset>
例 4 — aria-labelledbyを使用して名前を識別する

aria-labelledby属性を、生年月日フィールドのセットの最初のinputを参照するために使用します。これらの入力はラベルとして機能します。

<fieldset>
   <legend>Birth Date</legend>
   <select id="y" aria-labelledby="yr">
      <input value="year" id="yr">Year</input>
      …
   <select>
   <select id="m" aria-labelledby="mo">
      <input value="month" id="mo">Month</input>
      …
   <select>
   <select id="d" aria-labelledby="day">
      <input value="day" id="day">Day</input>
      …
   <select>
</fieldset>
例 5 — マルチパートラベル

aria-labelledby属性を、あいまいさを避けるために、アドレスタイプとフィールド名の両方を参照するために使用します。

<table>
   <tr>
      <td>
         <span id="shipping">Shipping Address</span>
      </td>
      <td>
         <span id="billing">Billing Address</span>
         <label>
            <input type="checkbox" id="bill-sameas" tabindex="8"/>
            Use shipping address for billing
         </label>
      </td>
   </tr>
   <tr>
      <td>
         <span class="label" id="str">Street</span>
         <input type="text" id="ship-street"
            aria-labelledby="shipping str" tabindex="1"/>
      </td>
      <td>
         <span class="label">Street</span>
         <input type="text" id="bill-street"
            aria-labelledby="billing str" tabindex="9"/>
      </td>
   </tr>
   <tr>
      <td>
         <span class="label" id="city">City</span>
         <input type="text" id="ship-city"
            aria-labelledby="shipping city" tabindex="2"/>
      </td>
      <td>
         <span class="label">City</span>
         <input type="text" id="bill-city"
            aria-labelledby="billing city" tabindex="10"/>
      </td>
   </tr>
   …
</table>
例6 — 非表示のラベルを追加する

各部分に目に見えるラベルがないため、 aria-label属性を電話番号フィールドの各部分を識別するために使用します。

<fieldset>
   <legend>Phone Number</legend>
   <input type="text" id="country" aria-label="country code"/>
   <input type="text" id="area" aria-label="area code"/>
   <input type="text" id="local" aria-label="number"/>
</fieldset>

解説

入力フォームとカスタムスクリプトコントロールにアクセシブルな名前を付けることは、ユーザーがその目的を理解できるようにするために不可欠です。ラベルが提供されると、支援技術によって各コントロールの名前が処理され、ユーザーはそれぞれの目的をすぐに理解できるようになります。

ただし、フォームのレイアウト方法により、ユーザーに入力フィールドの説明ラベルが表示される前にそのフィールドに到達してしまったり、フィールドよりかなり前にラベルが表示されてしまうことはよくあります。ラベルが提供されていない場合は、動的コンテンツを操作したりフォームに入力したりする操作がわかりにくくなることがあります。

HTMLには、ラベルをコントロールに関連付けるための二つのネイティブ要素が用意されています。

label

label要素は、個々のコントロールのアクセシブルな名前を識別するために使用します。コントロールとそのラベルを囲むか（例 1を参照）、コントロールのIDを参照するfor属性を追加できます（例 1を参照）。

fieldset

fieldset要素は、関連するコントロールのセットをグループ化するために使用します。子のlegend要素にはラベルを付与できます。（例 3 を参照）。

これらのネイティブメソッドには二つの短所があります。一つは、単一のラベルしか付けられないこと、もう一つは、ラベルがページの表示部分にある必要があり、テキストがlabel要素によってキャプチャされることです。より複雑なケースは、次のARIA属性で対応できます。

aria-labelledby

aria-labelledby属性は、複数の要素を参照するために使用します。コントロールに完全なコンテキストを与えるために複数の情報が必要な場合に便利です（例 5 を参照）。また、 label要素を使用できない場合にラベルを識別するのにも使用できます（例 4 を参照）。

aria-label

aria-label属性は、他の方法でラベルを付けられない場合に使用します（例 6を参照）。属性の値はコントロールのラベルです。

関連リンク