アクセシビリティ サポーテッド (AS) 情報：テストケース
0012-03: ラジオボタンとラベル (label 要素)

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

テスト実施時の注意点

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

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

1. それぞれのラジオボタンにフォーカスを移動すると、次のように関連付けられたラベルを知るための何らかの手段が提供されている

“1.” のラジオボタン : ラベル “チョコレートタイプ”

“2.” のラジオボタン : ラベル “クリームたっぷりタイプ”

“3.” のラジオボタン : ラベル “すっきり抹茶タイプ”

“4.” のラジオボタン : ラベル “はちみつがけタイプ”

2. “3.” のラジオボタンにフォーカスが移動すると、 “期間限定” は読み上げられない

TABキーで最初のラジオボタンに移動し、下矢印キーでラジオボタンを選択した。

チョコレートタイプの選択”、 "クリームたっぷりタイプの選択”、“すっきり抹茶タイプの選択”、 “はちみつがけタイプの選択”と順に読み上げられた。

“3.” のラジオボタンにフォーカスが移動すると、 “期間限定” は読み上げられない

"3."のラジオボタンに移動すると、"すっきり抹茶タイプ"のみ読み上げられ、"期間限定"は読み上げられなかった。

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

TABキーを押して最初のラジオボタンに移動し、その後下矢印キーを押していくと以下の順に読み上げる。

チョコレートタイプ、選択されていないラジオボタン 4分の1 検索プラススペースキーで切り替えます。

クリームたっぷりタイプ、選択されたラジオボタン 4分の2 検索プラススペースキーで切り替えます。

すっきり抹茶タイプ、選択されたラジオボタン 4分の3 検索プラススペースキーで切り替えます。

はちみつがけタイプ、選択されたラジオボタン 4分の4 検索プラススペースキーで切り替えます。

[WAIC注]実施日を2018年から2019年に訂正しました。

Tabキーで移動した。

“1.” のラジオボタン : ラベル の「チョコレートタイプ」、“2.” のラジオボタン : ラベル の「クリームたっぷりタイプ」、 “3.” のラジオボタン : ラベル の「すっきり抹茶タイプ」 “4.” のラジオボタン : ラベル 「はちみつがけタイプ」と読み上げた。

Tabキーで移動した。

ラベルの「すっきり抹茶タイプ」のみ読み上げた。

Fキーで各ラジオボタンに移動した。

次の 1. 〜 2. のようになった。

1. それぞれのラジオボタンにフォーカスを移動すると、次のように関連付けられたラベルが読み上げられた。

“1.” のラジオボタン : “チョコレートタイプ”

“2.” のラジオボタン : “クリームたっぷりタイプ”

“3.” のラジオボタン : “すっきり抹茶タイプ”

“4.” のラジオボタン : “はちみつがけタイプ”

2. “3.” のラジオボタンにフォーカスが移動しても、 “期間限定” は読み上げられなかった。

ラベル・テキスト「期間限定」をマウスでクリックし、挙動を確認した。

次の 1. 〜 5. のようになった。

1. ラベル “はちみつがけタイプ” をクリックすると、“4.” のラジオボタンの選択状態が切り替わった。

2. ラベル “クリームたっぷりタイプ” をクリックすると、“2.” のラジオボタンの選択状態が切り替わった。

3. ラベル “すっきり抹茶タイプ” をクリックすると、“3.” のラジオボタンの選択状態が切り替わった。

4. ラベル “チョコレートタイプ” をクリックすると、“1.” のラジオボタンの選択状態が切り替わった。

5. “期間限定” をクリックしても “3.” のラジオボタンの選択状態は切り替わらなかった。

先に送信した0012-03同様、ラベルをクリックした時にラジオボタンにフォーカスリングは表示されなかった。しかし、ラジオボタンの選択状態が切り替わることから「label 要素に指定したラベルとラジオボタンが関連付いているかの確認」は確認できていると考え、満たしていると判断した。

VOキー＋右矢印キーで各ラジオボタンに移動した。

以下のように読み上げられた。

“1.” のラジオボタン : “チョコレートタイプ ラジオボタン”

“2.” のラジオボタン : “クリームたっぷりタイプ ラジオボタン”

“3.” のラジオボタン : “すっきり抹茶タイプ ラジオボタン”

“4.” のラジオボタン : “はちみつがけタイプ ラジオボタン”