このページの本文へ移動

富士通ウェブ・アクセシビリティ指針 第1.01版

46. フォームは、ラベルとコントロールの関係を明確にし、設定項目をグルーピングするなどして、わかりやすく、操作しやすくすること。


優先度: 3 フォーム

解説

上肢に障害のある人や高齢者の場合、チェックボックスなど表示面積の小さいコントロールを、マウスで選択することは困難です。ラベル (名称) とコントロールを関連づけることで、ラベル部分をクリックし、コントロールを選択することが容易になります。また、ラベルとコントロールを関連づけ、複数のコントロールを適切にグルーピングすることで、設定すべきコントロールが見つけやすくなります。

事例と実装

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

悪い例: <label>タグを使用しない場合チェックボックスしかクリックできない


良い例: <label>タグを使用した場合「ポスター、チラシ」をクリックできる