アクセシビリティ・サポーテッド（AS）情報：C15-2c

C15-2c: CSSを用いて、ユーザーインタフェースコンポーネントがフォーカスを受けとったときの表示を変更する

関連する達成基準の実装方法一覧

7.2.4.7視覚的に認識可能なフォーカスに関する達成基準 (等級AA)

テストファイル

C15-2cのテストファイル

見解

要注意

対象

input type="radio"

注意点

Safariや、一部の古いブラウザでは動作しない。
標準のコントロールを使用する場合、標準のスタイルを変更していないかぎり、G149、G165によって達成基準は自動的に満たされていると考えてよい。

代替もしくは推奨する方法

例えば、SCR31のように、:focus疑似クラスや隣接セレクタをサポートしていないブラウザでも動作するようにスクリプトを用いて実装する方法が考えられる。

備考

C15を用いてラベルも強調したい場合、意図した通りに動作しないブラウザが複数ある。

テスト結果の詳細

ユーザエージェント 検証結果 操作手順 備考
Internet Explorer 6.0 × どちらの場合もラベルの背景色は変化しない。
マウス操作：
1.ラジオボタン又はラベルのテキストを選択すると、ラベルの背景色が#7FFF00（緑）になるか確認する。
2.もう一方のラジオボタンに選択を変更すると、選択したほうのラベルの背景色が#7FFF00（緑）になるか確認する。
3.その際、フォーカスを外すと背景色は元に戻るか確認する。
キーボード操作：
1.ラジオボタンにフォーカスをあてると、ラベルの背景色が#7FFF00（緑）になるか確認する。
2.もう一方のラジオボタンに選択を変更すると、選択したほうのラベルの背景色が#7FFF00（緑）になるか確認する。
3.その際、フォーカスを外すと背景色は元に戻るか確認する。		 どちらの場合もラベルの背景色は変化しない為。
Internet Explorer 7.0 × ラジオボタンをマウスクリック、もしくはキーボードフォーカスして確認。 ラジオボタンをマウスクリック、もしくはキーボードフォーカスしても、背景色が青くならなかった。
Internet Explorer 8.0 × ラジオボタンをマウスクリック、もしくはキーボードフォーカスしても、背景色が緑にならなかった。
Internet Explorer 9 ○ 1:マウス操作：ラジオボタン又はラベルのテキストを選択すると、２つのどちらも背景色が#7FFF00（緑）になり、外すと背景色は元に戻ることを確認
2:キーボード操作：ラジオボタンにフォーカスをあてると、２つのどちらも背景色が#7FFF00（緑）になり、フォーカスを外すと背景色は元に戻ることを確認		 1:○
2:○
Firefox 3.5 ○ マウス操作：
1.ラジオボタン又はラベルのテキストを選択すると、ラベルの背景色が#7FFF00（緑）になるか確認する。
2.もう一方のラジオボタンに選択を変更すると、選択したほうのラベルの背景色が#7FFF00（緑）になるか確認する。
3.その際、フォーカスを外すと背景色は元に戻るか確認する。
キーボード操作：
1.ラジオボタンにフォーカスをあてると、ラベルの背景色が#7FFF00（緑）になるか確認する。
2.もう一方のラジオボタンに選択を変更すると、選択したほうのラベルの背景色が#7FFF00（緑）になるか確認する。
3.その際、フォーカスを外すと背景色は元に戻るか確認する。
Firefox 4.0 ○ 1:マウス操作：ラジオボタン又はラベルのテキストを選択すると、２つのどちらも背景色が#7FFF00（緑）になり、外すと背景色は元に戻ることを確認
2:キーボード操作：ラジオボタンにフォーカスをあてると、２つのどちらも背景色が#7FFF00（緑）になり、フォーカスを外すと背景色は元に戻ることを確認
Firefox 9.0 ○ 1:マウス操作：ラジオボタン又はラベルのテキストを選択すると、２つのどちらも背景色が#7FFF00（緑）になり、外すと背景色は元に戻ることを確認
2:キーボード操作：ラジオボタンにフォーカスをあてると、２つのどちらも背景色が#7FFF00（緑）になり、フォーカスを外すと背景色は元に戻ることを確認		 1:○
2:○
Safari 3.2 △ 1. マウス操作：
ラジオボタン又はラベルのテキストを選択しても、ラベルの背景色が変化しなかった。
2. キーボード操作：
ラジオボタンにフォーカスをあてると、ラベルの背景色が変化し、もう一方のラジオボタンに選択を変更すると、選択したほうのラベルの背景色が変化した。また、フォーカスを外すと背景色は元に戻った。
Safari 5.0.3 △ 1. マウス操作：
ラジオボタン又はラベルのテキストを選択しても、ラベルの背景色が変化しなかった。
2. キーボード操作：
ラジオボタンにフォーカスをあてると、ラベルの背景色が変化し、もう一方のラジオボタンに選択を変更すると、選択したほうのラベルの背景色が変化した。また、フォーカスを外すと背景色は元に戻った。		 1.×
2.○
JAWS for Windows 9.0 - テスト不要
ホームページ・リーダー 3.04 - テスト不要
PC-Talker XP 3.06 - テスト不要
PC-Talker XP 3.06 + NetReader 1.18 - テスト不要
FocusTalk V3 - テスト不要
NVDA 2010.1j - テスト不要
NVDA 2011.1 - テスト不要
Firefox18.0.1 ○ 1:マウス操作：ラジオボタン又はラベルのテキストを選択すると、２つのどちらも背景色が#7FFF00（緑）になり、外すと背景色は元に戻ることを確認
2:キーボード操作：ラジオボタンにフォーカスをあてると、２つのどちらも背景色が#7FFF00（緑）になり、フォーカスを外すと背景色は元に戻ることを確認
Google Chrome 25 △ 【1】ラジオボタン又はラベルのテキストを選択すると、ラベルの背景色が#7FFF00（緑）になり、もう一方のラジオボタンに選択を変更すると、選択したほうのラベルの背景色が#7FFF00（緑）になるか。また、フォーカスを外すと背景色は元に戻るかを確認する。
【2】ラジオボタンにフォーカスをあてると、ラベルの背景色が#7FFF00（緑）になり、もう一方のラジオボタンに選択を変更すると、選択したほうのラベルの背景色が#7FFF00（緑）になるか。また、フォーカスを外すと背景色は元に戻るかを確認する。		 【1】×
ラジオボタン又はラベルのテキストを選択した際に、ラベルの背景色に変化がないことを確認した。
【2】○
ラジオボタンにフォーカスをあてると、ラベルの背景色が#7FFF00（緑）になり、もう一方のラジオボタンに選択を変更すると、選択したほうのラベルの背景色が#7FFF00（緑）になることを確認した。また、フォーカスを外すと背景色は元に戻ることを確認した。
Safari 6.0.5 △ 2.のキーボード操作において、フォーカスの移動には矢印キーの左、右を使用 1.のマウス操作では背景色に変化が見られなかった
NVDA 2012.3 - テスト不要
PC-Talker 7 2.12 - テスト不要
VoiceOver - テスト不要