WAIC-TEST-0003-01
フォーカス移動順序を指定した複数のフォームコントロール (マークアップ順)
複数のフォームコントロールにフォーカス順序を指定した場合、指定した順序でフォーカスが移動するかの確認
2.4.3
H4
<div>
<form action="#" method="post">
<table>
<caption>グリーティングカードのオーダーフォーム</caption>
<tr>
<th>入力内容</th>
<th>送り先1</th>
<th>送り先2</th>
</tr>
<tr>
<th>姓</th>
<td><input type="text" size="30" value="" name="dest1first" title="1番目の受取人の名字" tabindex="1"></td>
<td><input type="text" size="30" value="" name="dest2first" title="2番目の受取人の名字" tabindex="10"></td>
</tr>
<tr>
<th>名</th>
<td><input type="text" size="30" value="" name="dest2last" title="1番目の受取人の名前" tabindex="2"></td>
<td><input type="text" size="30" value="" name="dest2last" title="2番目の受取人の名前" tabindex="11"></td>
</tr>
<tr>
<th>住所</th>
<td><input type="text" size="30" value="" name="dest1add" title="1番目の受取人の住所" tabindex="3"></td>
<td><input type="text" size="30" value="" name="dest2add" title="2番目の受取人の住所" tabindex="12"></td>
</tr>
<tr>
<th>カードのデザイン</th>
<td><label><input type="radio" value="watermelon" name="dest1design" title="1番目の受取人へのカードデザイン:スイカ" tabindex="4">スイカ</label><br><label><input type="radio" value="fireworks" name="dest1design" title="1番目の受取人へのカードデザイン:花火" tabindex="5">花火</label></td>
<td><label><input type="radio" value="watermelon" name="dest2design" title="2番目の受取人へのカードデザイン:スイカ" tabindex="13">スイカ</label><br><label><input type="radio" value="fireworks" name="dest2design" title="2番目の受取人へのカードデザイン:花火" tabindex="14">花火</label></td>
</tr>
<tr>
<th>オプション</th>
<td><label><input type="checkbox" value="" name="dest1stamp" title="1番目の受取人へのオリジナルスタンプ" tabindex="6">オリジナルスタンプ</label><br><label><input type="checkbox" value="" name="dest1melody" title="1番目の受取人へのメロディカード" tabindex="7">メロディカード</label></td>
<td><label><input type="checkbox" value="" name="dest2stamp" title="2番目の受取人へのオリジナルスタンプ" tabindex="15">オリジナルスタンプ</label><br><label><input type="checkbox" value="" name="dest2melody" title="2番目の受取人へのメロディカード" tabindex="16">メロディカード</label></td>
</tr>
<tr>
<th>メッセージ</th>
<td><textarea name="dest1msg" cols="30" rows="5" tabindex="8" title="1番目の受取人へのメッセージ"></textarea></td>
<td><textarea name="dest2msg" cols="30" rows="5" tabindex="17" title="2番目の受取人へのメッセージ"></textarea></td>
</tr>
<tr>
<th>確認</th>
<td><button type="button" name="dest1conf" tabindex="9">1番目の受取人へのカードプレビュー</button></td>
<td><button type="button" name="dest2conf" tabindex="18">2番目の受取人へのカードプレビュー</button></td>
</tr>
</table>
<p><input type="submit" value="注文内容の確認" name="submit" title="注文内容の確認" tabindex="19"> <input type="reset" value="入力内容のリセット" name="reset" title="入力内容のリセット" tabindex="20"></p>
</form></div>
キーボード操作 : Tab キーを押下し、フォーカスの移動順序を確認
次の順序でフォーカスが移動する :
なし
キーボード操作 : Tab キーを押下し、フォーカスの移動順序を確認
次の順序でフォーカスが移動する :
なし