フォームのコントロールとラベルが関連付けられていません
JIS 5.3 b); WCAG 12.4;
 
 
概要

Webページに、コントロールと対応するラベルがlabel要素で関連付けられていないフォームがあります。

 
 
修正/チェック方法

ラベルとコントロールの関連付けは、以下の3つのステップで行ってください。

  1. id属性を用いて、コントロールにユニークなIDを割り当てる。
  2. そのコントロールと関連付けたいテキストまたはイメージのラベルをlabel要素でマークアップする。
  3. そのlabel要素にfor属性を付加して、その属性値にコントロールのid属性値と同じ値を記述する。
 
 
修正/チェックのポイント

ラベル(名称)とコントロールを関連づけ、複数のコントロールを適切にグルーピングすることで、設定すべきコントロールが見つけやすくなります。

また、上肢に障害のある利用者や高齢者の場合、チェックボックスなど表示面積の小さいコントロールを、マウスで選択することは困難です。
ラベルとコントロールを関連づけることで、ラベル部分をクリックし、コントロールを選択することが容易になります。

  • <label>タグを使用し、ラベルとコントロールを関連づける。
  • コントロールが多くなる場合は、グループ化する。<fieldset>タグを使って、グループ化し、<legend>タグでグループのタイトルをつければよい。

『富士通ウェブ・アクセシビリティ指針 第2.0版』 © 2004 富士通株式会社

 
 
JIS関連項目

5.3 操作及び入力
b)
入力欄を使用するときは,何を入力すればよいかを理解しやすく示し,操作しやすいよう配慮しなければならない。
例5. ラベル(対応するコントロールの名称)とチェックボックスなどのコントロールを関連付けること。ラベル部分をクリックしてもコントロールを選択できるようになる。また,ラベルを適切に記述することで音声ブラウザなどは,各コントロールの意味を利用者に誤らずに伝えることができるようになる。

JIS X 8341-3:2004『高齢者・障害者等配慮設計指針-情報機器における機器,ソフトウェア及びサービス-第三部:ウェブコンテンツ』(© 財団法人 日本規格協会)

 
 
解説

フォームをTabキーで操作しているとき、画面を見ているユーザーは、コントロールをすぐ近くにあるラベルと容易に関連付けることができます。しかしながら、スクリーンリーダーのユーザーは、視覚的に判断することができません。どのラベルがどのコントロールと対応しているのかを明示的に関連付けることが必要です。

ベストな方法は、label要素を用いてこの関連付けを行うことです。label要素でラベルとなるテキストをマークアップして、label要素のfor属性値をコントロールのid属性値と同じ値にします。

原則として、1つのラベルは1つのコントロールと関連付けることができますが、2つ以上のラベルを同じコントロールに関連付けることも可能です。ただ、すべてのスクリーンリーダーがサポートしているわけではないので、各コントロールに対して1つのラベルを関連付けることを推奨します。

あるラベルをあるコントロールと暗黙的に関連付けることも可能です。ラベルとなるテキストとコントロールの両方をlabel要素で囲みます。このテクニックは、HTML 4.01の勧告文書(標準仕様)で示されていますが、まだすべてのスクリーンリーダーがサポートしているわけではありません。

 
 
JIS X 8341-3について

JIS X 8341-3 の内容は、以下のサイトにて規格番号「X8341-3」で検索して、規格票をご覧ください。

  • 閲覧:日本工業標準調査会(JISC)
    http://www.jisc.go.jp/
  • 購入:日本規格協会(JSA Web Store)
    http://www.webstore.jsa.or.jp/