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

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

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

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

テストファイル

C15-1のテストファイル

見解

達成可能

対象

a要素

備考

IE6ではキーボード操作時に背景色が変更されないが、標準のドットの囲み罫線は表示される。

テスト結果の詳細

ユーザエージェント 検証結果 操作手順 備考
Internet Explorer 6.0 △ キーボード操作でフォーカスをあてた時、リンクの文字色と背景色が変化しない。
マウス操作：
1.それぞれのテキストリンクにマウスカーソルをあて、リンクの文字色と背景色が変化するか確認する。
キーボード操作：
1. Tabキーによる移動でそれぞれのテキストリンクにフォーカスをあて、リンクの文字色と背景色が変化するか確認する。		 キーボード操作でフォーカスをあてた時、リンクの文字色と背景色が変化しない為。
Internet Explorer 7.0 ○ リンクテキストをマウスオーバー、もしくはキーボードフォーカスすることにより、背景色が青くなることを確認
Internet Explorer 8.0 ○ リンクテキストをマウスオーバー、もしくはキーボードフォーカスすることにより、背景色が青くなり、フォーカスが外れると元に戻ることを確認
Internet Explorer 9 ○ 1:マウス操作：各リンクにマウスオーバーしたときに、そのリンクの文字色と背景色が背景色: #DCFFFF、文字色: #000066に変化し、マウスオーバーを外すと、元に戻ることを確認
2:キーボード操作：各リンクにフォーカスを移動させたときに、そのリンクの文字色と背景色が背景色: #DCFFFF、文字色: #000066に変化し、フォーカスを外すと、元に戻ることを確認		 1:○
2:○
Firefox 3.5 ○ マウス操作：
1.それぞれのテキストリンクにマウスカーソルをあて、リンクの文字色と背景色が変化するか確認する。
キーボード操作：
1. Tabキーによる移動でそれぞれのテキストリンクにフォーカスをあて、リンクの文字色と背景色が変化するか確認する。
Firefox 4.0 ○ 1:マウス操作：各リンクにマウスオーバーしたときに、そのリンクの文字色と背景色が変化し、マウスオーバーを外すと、元に戻ることを確認
2:キーボード操作：各リンクにフォーカスを移動させたときに、そのリンクの文字色と背景色が変化し、フォーカスを外すと、元に戻ることを確認
Firefox 9.0 ○ 1:マウス操作：各リンクにマウスオーバーしたときに、そのリンクの文字色と背景色が背景色: #DCFFFF、文字色: #000066に変化し、マウスオーバーを外すと、元に戻ることを確認
2:キーボード操作：各リンクにフォーカスを移動させたときに、そのリンクの文字色と背景色が背景色: #DCFFFF、文字色: #000066に変化し、フォーカスを外すと、元に戻ることを確認		 1:○
2:○
Safari 3.2 ○ 1. マウス操作：
各リンクにマウスオーバーしたときに、そのリンクの文字色と背景色が変化した。そして、マウスオーバーを外すと、元の文字色と背景色に戻った。
2. キーボード操作：
各リンクにフォーカスを移動させたときに、そのリンクの文字色と背景色が変化した。そして、フォーカスを外すと、元の文字色と背景色に戻った。
Safari 5.0.3 ○ 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:マウス操作：各リンクにマウスオーバーしたときに、そのリンクの文字色と背景色が背景色: #DCFFFF、文字色: #000066に変化し、マウスオーバーを外すと、元に戻ることを確認
2:キーボード操作：各リンクにフォーカスを移動させたときに、そのリンクの文字色と背景色が背景色: #DCFFFF、文字色: #000066に変化し、フォーカスを外すと、元に戻ることを確認
Google Chrome 25 ○ 【1】各リンクにマウスオーバーしたときに、そのリンクの文字色と背景色が変化するか（背景色: #DCFFFF、文字色: #000066）。そして、マウスオーバーを外すと、元の文字色と背景色に戻るかを確認する。
【2】各リンクにフォーカスを移動させたときに、そのリンクの文字色と背景色が変化するか（背景色: #DCFFFF、文字色: #000066）。そして、フォーカスを外すと、元の文字色と背景色に戻るかを確認する。		 【1】○
各リンク（“サービス”“プロジェクト”“体験版”“会社概要”“お問い合わせ”“リンク”）にマウスオーバーしたときに、背景色: #DCFFFF、文字色: #000066に変化することを確認した。また、マウスオーバーを外すと、元の文字色と背景色に戻ることを確認した。
【2】○
各リンク（“サービス”“プロジェクト”“体験版”“会社概要”“お問い合わせ”“リンク”）にフォーカスを移動したときに、背景色: #DCFFFF、文字色: #000066に変化することを確認した。また、フォーカスを外すと、元の文字色と背景色に戻ることを確認した。
Safari 6.0.5 ○
NVDA 2012.3 - テスト不要
PC-Talker 7 2.12 - テスト不要
VoiceOver - テスト不要