as_test

テスト ID

WAIC-TEST-0012-01

テストのタイトル

テキスト入力フィールドとラベル (label 要素)

テストの目的

label 要素に指定したラベルとテキスト入力フィールドが関連付いているかの確認

テストの対象となる達成基準 (複数)

1.1.1, 1.3.1, 3.3.2, 4.1.2

関連する達成方法 (複数)

H44

テストコード (テストファイルへのリンク)

WAIC-CODE-0012-01

テストコードのソース (抜粋)

<div>
<div id="labelrow">
<label for="lastname">姓</label> <label for="firstname">名</label> 
</div>
<div>
1. <input type="text" name="lastname" id="lastname">
2. <input type="text" name="firstname" id="firstname">
</div>
<div class="inputInLabel">
3. <label>住所: <input type="text" name="address" id="address"></label>
</div>
<div class="inputInLabel">
4. <label><input type="text" name="tel" id="tel">:電話番号</label> ハイフンは不要
</div>
</div>

テスト手順と期待される結果 (視覚閲覧環境)

テスト手順 1

1. ラベル “姓” をクリックする
2. ラベル “名” をクリックする
3. ラベル “住所” をクリックする
4. ラベル “電話番号” をクリックする

期待される結果 1

ラベル “姓” をクリックすると“1.”、“名” は“2.”、“住所” は“3.” 、“電話番号” は“4.”のテキスト入力フィールドにそれぞれフォーカスが移動する

テスト手順 2

1. “ハイフンは不要” をクリック

期待される結果 2

1. “ハイフンは不要” をクリックしても “4.” のテキスト入力フィールドにフォーカスが移動しない

テスト実施時の注意点 (視覚閲覧環境)

なし

テスト手順 (音声閲覧環境)

テストファイルを操作し、結果を確認

期待される結果 (音声閲覧環境)

次の 1. 〜 2. をすべて満たしている

1. それぞれのテキスト入力フィールドにフォーカスを移動すると、次のように関連付けられたラベルを知るための何らかの手段が提供されている
   • “1.” のテキスト入力フィールド : ラベル “姓”
   • “2.” のテキスト入力フィールド : ラベル “名”
   • “3.” のテキスト入力フィールド : ラベル “住所”
   • “4.” のテキスト入力フィールド : ラベル “電話番号”
2. “4.” のテキスト入力フィールドにフォーカスを移動すると、 “ハイフンは不要” は読み上げられない

テスト実施時の注意点 (音声閲覧環境)

1. では、テキスト入力フィールドとラベルの位置関係による関連付けではなく、label 要素 (内のテキストのみ) による関連付けかどうかを確認している

関連する要素や属性

type=”text” を持つ input 要素 , label 要素