as_test

テスト ID

WAIC-TEST-0012-03

テストのタイトル

ラジオボタンとラベル (label 要素)

テストの目的

label 要素に指定したラベルとラジオボタンが関連付いているかの確認

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

1.1.1, 1.3.1, 3.3.2, 4.1.2

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

H44

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

WAIC-CODE-0012-03

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

<div>
<h1>ドーナツの選択</h1>
<p>お好みのドーナツを選び、「購入」ボタンを押してください。</p>
<form action="#" method="post">
<p>
1. <input type="radio" name="flavor" id="choc" value="choc">
<label for="honey">はちみつがけタイプ</label><br>
2. <label><input type="radio" name="flavor" id="cream" value="cream"> クリームたっぷりタイプ</label><br>
3. <label>すっきり抹茶タイプ <input type="radio" name="flavor" id="maccha" value="maccha"></label> 期間限定<br>
4. <input type="radio" name="flavor" id="honey" value="honey">
<label for="choc">チョコレートタイプ</label><br>
<input type="submit" value="購入">
</p>
</form>
</div>

テスト手順 (視覚閲覧環境)

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

期待される結果 (視覚閲覧環境)

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

1. ラベル “はちみつがけタイプ” をクリックすると、“4.” のラジオボタンにフォーカスが移動する
2. ラベル “クリームたっぷりタイプ” をクリックすると、“2.” のラジオボタンにフォーカスが移動する
3. ラベル “すっきり抹茶タイプ” をクリックすると、“3.” のラジオボタンにフォーカスが移動する
4. ラベル “チョコレートタイプ” をクリックすると、“1.” のラジオボタンにフォーカスが移動する
5. “期間限定” をクリックしても “3.” のラジオボタンにフォーカスが移動しない

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

なし

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

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

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

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

1. それぞれのラジオボタンにフォーカスを移動すると、次のように関連付けられたラベルを知るための何らかの手段が提供されている
   • “1.” のラジオボタン : ラベル “チョコレートタイプ”
   • “2.” のラジオボタン : ラベル “クリームたっぷりタイプ”
   • “3.” のラジオボタン : ラベル “すっきり抹茶タイプ”
   • “4.” のラジオボタン : ラベル “はちみつがけタイプ”
2. “3.” のラジオボタンにフォーカスが移動すると、 “期間限定” は読み上げられない

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

2. では、ラジオボタンとラベルの位置関係による関連付けではなく、label 要素 (内のテキストのみ) による関連付けかどうかを確認している

関連する要素や属性

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