2010年10月18日月曜日

アクセシビリティJIS チェックポイント(4)― 7.1.1.1 LABEL要素

フォーム・コントロールに関連したラベルには LABEL 要素を使用する

実装方法

・フォーム・コントロールに関連したラベルに LABEL 要素を定義する
・その中で FOR 属性を使用してコントロール情報を付加する



<FORM action="action.cgi" method="get">
<LABEL for="name">名前:</LABEL>
<INPUT type="text" id="name" SIZE="50"><BR>
<FIELDSET>
<LEGEND>性別</LEGEND>
<INPUT TYPE="radio" name="sex" id="male">
<LABEL FOR="male">男性</LABEL>
<INPUT TYPE="radio" name="sex" id="female">
<LABEL FOR="female">女性</LABEL>
</FIELDSET> <BR>
<INPUT TYPE="submit"> <INPUT TYPE="reset">
</FORM>

LABEL 要素

LABEL 要素を使用してフォーム・コントロールとそのラベルを明示的に関連付ける必要があります。

各 FORM コントロールのラベルに対して LABEL 要素を配置し、その中に FOR 属性を使用して、特定のフォーム・コントロールと関連付けます。その際に FOR 属性の値は、フォーム・コントロールの ID 属性の値と同じである必要があります。

また、「リセット」ボタンや、「送信」ボタン、およびイメージ・ボタンには、暗黙的に関連付けられたラベルがあるため、ラベルを関連付ける必要はありません。イメージ・ボタンの場合は VALUE 属性または ALT テキストにて関連付けを行います。

上記の定義を行うことで、ブラウザは、特定のコントロールにどのラベルが関連付けられているかをユーザーに明示的に示すことができ、ラベルをクリックすると、カーソルがフォーム・フィールドに移動するか、ラジオ・ボタンまたはチェック・ボックスの値が切り替わります。これは多くのユーザーにとって理解しやすく、マウスで実行できる操作の範囲が広がります。

重要度

  ★★(強く推奨)

ガイドライン

  JIS X 8341-3:2010  7.1.1.1  A
  WCAG 2.0 checkpoint  1.1.1  A
  WCAG 1.0 checkpoint  12.4

以上