ページ制作のアクセシビリティ指針
優先度1



解説

フォームは、チェックボックス、ラジオボタンなど、操作の対象となる「コントロール」と、コントロールが表す意味などを示す「ラベル」から構成されます。
ラベルとコントロールが正しく関連付けられていない場合、コントロールの意味が分かりにくくなります。
フォームの操作や項目の選択は、特に上肢に障害を持つ利用者にとっては容易ではありませんが、Webブラウザによってはラベルをつけることによって操作がしやすくなるものがあります。


実例

  • フォームでは、コントロールとラベルをLABEL要素で関連づけます。

悪い例:

コントロールとラベルが関連づけられていません。

悪い例の画面イメージ。選択項目にカーソルが重なっています。コントロールとラベルが関連づけられていないので、ラベル部分をクリックしてもコントロール(入力フィールド)が選択されません。
<form action="...">
                   ....
<input type="radio" name="..." id="" value="...">Web通帳式

良い例:

コントロールとラベルが関連づけられています。

良い例の画面イメージ。コントロールとラベルが関連づけられているので、ラベルをクリックすると項目(入力フィールド)が選択されます。
<form action="...">
                   ....
<input type="radio" name=" web_bankbook " 
id="web_bankbook" value="..."><label
 for="web_bankbook">Web通帳式</label>

※Webブラウザによっては、ラベルをクリックしてもコントロールが選択されるようになります。


当行における特記事項:

インターネットバンキングや資料請求、住宅ローン申込み、ローンシミュレーション等、フォームを用いるページ。



関連するJISの項目

5.3 b (必須)




アクセシビリティガイドライン トップ

このページの先頭へ戻る