アクセシビリティ・サポーテッド(AS)情報:SCR28-1

SCR28-1: 展開可能及び折り畳み可能なメニューを用いて、コンテンツのブロックをバイパスする

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

7.2.4.1ブロックスキップに関する達成基準 (等級A)

テストファイル

SCR28-1のテストファイル

見解

要注意

対象

リンクを押すと開閉するメニュー

注意点

スクリーンリーダーのHPR、NetReader、FocusTalkでは非表示にしてもフォーカスを受け取るため、スキップできない。ただし、最近のスクリーンリーダーでは問題ない。

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

表示を切り替えるリンク/ボタンのラベルと説明文を用いて、そのリンクを使うことによって何が起きるのか(表示と非表示を切り替える)、どこからどこまでが非表示になるのか(表示/非表示が切り替えられる範囲)が分かるようにする必要がある。
達成基準7.2.4.1のの意図は、メインコンテンツの先頭へ直接移動できるメカニズムを提供することであり、HTMLのウェブページではSCR28ではなく、H69の使用を推奨する。
なお、JavaScriptが "依存するウェブコンテンツ技術" ではない場合にはSCR28は使用できない。

テスト結果の詳細

ユーザエージェント 検証結果 操作手順 備考
Internet Explorer 6.0 1.「メニュー」をクリックしたら、4つのリンクの非表示/表示を切り替えられた
2.「メニュー」をEnterしたら、4つのリンクが非表示になった
3.4つのリンクを非表示にした後、Tabキーを押下するとフォーカスがメインコンテンツ部分の「メインコンテンツのリンク」へ移動した
4.4つのリンクを非表示し、Tabキーを押下していくとフォーカスが「リンク 1」から順に再表示された4つのリンクを経て、メインコンテンツ部分の「メインコンテンツのリンク」へ移動した
Internet Explorer 7.0 1.マウス操作で「メニュー」をクリックすると4つのリンクの非表示、表示を切り換えられる。
2.キーボード操作で「メニュー」を押下すると4つのリンクの非表示、表示を切り換えられる。
3.4つのリンクを非表示にしたあと、tabで移動すると「メインコンテンツのリンク」へ移動する。
4.4つのリンクを表示させた後、tabで移動すると「リンク1」から「メインコンテンツ~」まで移動する。
Internet Explorer 8.0 1.マウス操作で「メニュー」をクリックすると4つのリンクの非表示、表示を切り換えられる。
2.キーボード操作で「メニュー」を押下すると4つのリンクの非表示、表示を切り換えられる。
3.4つのリンクを非表示にしたあと、tabで移動すると「メインコンテンツのリンク」へ移動する。
4.4つのリンクを表示させた後、tabで移動すると「リンク1」から「メインコンテンツ~」まで移動する。
Internet Explorer 9 1:マウス操作で「メニュー」をクリックすると、4つのリンクの非表示/表示を切り替えられることを確認
2:キーボード操作でリンク「メニュー」を押下すると、4つのリンクが非表示になることを確認
3:キーボード操作で4つのリンクを非表示にした後、Tabキーを押下するとフォーカスが「メインコンテンツのリンク」へ移動することを確認
4:キーボード操作で「メニュー」を押下し、4つのリンクを表示され、Tabをおすと以下のようにフォーカスが移動することを確認
「リンク1」→「リンク2」→「リンク3」→「「リンク4」→「メインコンテンツのリンク」
1:○
2:○
3:○
4:○
Firefox 3.5 1:「メニュー」をクリックすると4つのリンクが表示/非表示に切り替わる
2:「メニュー」のリンクにフォーカスを合わせてEnterを押すと、4つのリンクが消える
3:非表示の場合、4つのリンクにフォーカスが当たらない
4:表示している場合、4つのリンクにフォーカスが当たる
Firefox 4.0 1:「メニュー」をクリックすると、4つのリンクの非表示/表示を切り替えられることを確認
2:リンク「メニュー」を押下すると、4つのリンクが非表示になることを確認
3:4つのリンクを非表示にした後、Tabキーを押下するとフォーカスが「メインコンテンツのリンク」へ移動することを確認
4:「メニュー」を押下し、4つのリンクを表示され、Tabをおすと以下のようにフォーカスが移動することを確認
「リンク1」→「リンク2」→「リンク3」→「「リンク4」→「メインコンテンツのリンク」
Firefox 9.0 1:マウス操作で「メニュー」をクリックすると、4つのリンクの非表示/表示を切り替えられることを確認
2:キーボード操作でリンク「メニュー」を押下すると、4つのリンクが非表示になることを確認
3:キーボード操作で4つのリンクを非表示にした後、Tabキーを押下するとフォーカスが「メインコンテンツのリンク」へ移動することを確認
4:キーボード操作で「メニュー」を押下し、4つのリンクを表示され、Tabをおすと以下のようにフォーカスが移動することを確認
「リンク1」→「リンク2」→「リンク3」→「「リンク4」→「メインコンテンツのリンク」
1:○
2:○
3:○
4:○
Safari 3.2 「メニュー」をクリック、またはキーボードで押下すると「リンク」の切り替えが行え、フォーカス移動も問題なく行える 1:○
2:○
3:○(ただしOption+Tab)
4:○(ただしOption+Tab)
Safari 5.0.3 1:○
2:○
3:○(ただしOption+Tab)
4:○(ただしOption+Tab)
JAWS for Windows 9.0 ■操作手順
1.「メニュー」を押下して4つのリンクを非表示にし、Tabキーを押すとフォーカスがメインコンテンツ部分の「メインコンテンツのリンク」へ移動して「メインコンテンツのリンク リンク」と読み上げた
2.「メニュー」に戻って4つのリンクを表示させた後、Tabキーを押していくとフォーカスが「リンク 1」から順に再表示された4つのリンクを経て、メインコンテンツ部分の「メインコンテンツのリンク」へと移動しながら、それぞれのリンクを読み上げた
■音声読み上げ
1.「メニュー ページ内リンク」
「メインコンテンツのリンク リンク」
2.「メニュー ページ内リンク」
「リンク1 リンク」
「リンク2 リンク」
「リンク3 リンク」
「リンク4 リンク」
「メインコンテンツのリンク リンク」
ホームページ・リーダー 3.04 × ■操作手順
「メニュー」でEnterを押すと、ページの先頭から読み直してしまう
■音声読み上げ
「以下にある、リンク「メニュー」をマウス操作でクリックするか、又はキーボード操作でフォーカスをあててEnterキーを押下すると、4つのリンクの表示/非表示が切り替えられます。メニューイベント 以下にある…」
「メニュー」でEnterを押してからTabを押しても(このテストファイルでは)「メニュー」にたどり着く
PC-Talker XP 3.06 ■操作手順
1「以下にある、リンク「メニュー」をマウス操作でクリックするか、又はキーボード操作でフォーカスをあててEnterキーを押下すると、4つのリンクの表示/非表示が切り替えられます。メニュー、メインコンテンツ。」と読み上げていく。
2.「以下にある、リンク「メニュー」をマウス操作でクリックするか、又はキーボード操作でフォーカスをあててEnterキーを押下すると、4つのリンクの表示/非表示が切り替えられます。メニュー、リンク 1 リンク 2 リンク 3 リンク 4 、メインコンテンツ。」と読み上げていく。
■音声読み上げ
「以下にある、リンク「メニュー」をマウス操作でクリックするか、又はキーボード操作でフォーカスをあててEnterキーを押下すると、4つのリンクの表示/非表示が切り替えられます。メニュー、メインコンテンツ。」
「以下にある、リンク「メニュー」をマウス操作でクリックするか、又はキーボード操作でフォーカスをあててEnterキーを押下すると、4つのリンクの表示/非表示が切り替えられます。メニュー、リンク 1 リンク 2 リンク 3 リンク 4 、メインコンテンツ。」
PC-Talker XP 3.06 + NetReader 1.18 ■操作手順
リンク「メニュー」を押下して4つのリンクを非表示にすると、読み上げがページの先頭へ戻る。tabキーを押下すると、「メニュー」の次のフォーカスは画面上では非表示になっている「リンク 1」になり、「メインコンテンツのリンク」へはフォーカスされない。
■音声読み上げ
「以下にある テン リンク カギ メニュー カギトジ をマウス操作でクリックするか テン 又はキーボード操作でフォーカスをあててEnterキーを押下すると テン 4つのリンクの表示 スラッシュ 非表示が切り替えられます マル メニュー  リンク イチ・・・ 」
リンク「メニュー」にフォーカスを移動させて押下した後の結果が、操作画面によって異なるため、△とした。
■分割画面表示でのテキスト画面
×(4つのリンクの表示/非表示が切り替えられず、フォーカスはページ先頭に戻ってしまう)
■分割画面表示でのグラフィック画面
○(4つのリンクの表示/非表示が切り替えられ、フォーカスは保たれる)
■テキスト画面(単独表示)
×(4つのリンクの表示/非表示が切り替えられず、フォーカスはページ先頭に戻ってしまう)
■グラフィック画面(単独表示)
△(4つのリンクの表示/非表示が切り替えられるが、フォーカスはページ先頭に戻ってしまう)
FocusTalk V3 ■操作手順
1:「メニュー」でEnterを押し4つのメニューを非表示にして、Tabを押すと4つのメニューのリンクへ順にフォーカスが移動してから、「メインコンテンツのリンク」に移動する。
2:4つのメニューを表示してTabを押すと4つのメニューのリンクへ順にフォーカスが移動してから、「メインコンテンツのリンク」に移動する。
■音声読み上げ
「メニュー リンク1…」
1:×
2:○
NVDA 2010.1j ■操作手順
リンク項目「メニュー」にフォーカスを移動し、Enterキーを押してTabキーで次のリンクに移動したところ、「メインコンテンツのリンクリンク」と読み上げた。また、「メニュー」に戻ってEnterキーを押し、Tabキーで移動したところ、「リンク1リンク、リンク2リンク、リンク3リンク、リンク4リンク」と読み上げた後に「メインコンテンツのリンクリンク」と読み上げた。
■音声読み上げ
「メニューリンク メインコンテンツのリンクリンク
メニューリンク リスト7項目リンク1リンク リンク2リンク リンク3リンク リンクリンク リスト終了メインコンテンツのリンクリンク」
NVDA 2011.1 ■操作手順
リンク項目「メニュー」にフォーカスを移動し、Enterキーを押して次のリンクに移動したところ、「メインコンテンツのリンクリンク」と読み上げた。また、「メニュー」に戻ってEnterキーを押して移動したところ、「リンク1リンク、リンク2リンク、リンク3リンク、リンク4リンク」と読み上げた後に「メインコンテンツのリンクリンク」と読み上げた。
■音声読み上げ
メニューリンク メインコンテンツのリンクリンク
メニューリンク リスト7項目リンク1リンク リンク2リンク リンク3リンク リンク4リンク リスト終了メインコンテンツのリンクリンク
Firefox18.0.1 1:マウス操作で「メニュー」をクリックすると、4つのリンクの非表示/表示を切り替えられることを確認
2:キーボード操作でリンク「メニュー」を押下すると、4つのリンクが非表示になることを確認
3:キーボード操作で4つのリンクを非表示にした後、Tabキーを押下するとフォーカスが「メインコンテンツのリンク」へ移動することを確認
4:キーボード操作で「メニュー」を押下し、4つのリンクを表示され、Tabをおすと以下のようにフォーカスが移動することを確認
「リンク1」→「リンク2」→「リンク3」→「「リンク4」→「メインコンテンツのリンク」
Google Chrome 25 【1】リンク「メニューの表示/非表示を切替」をクリックすると、4つのリンクの非表示/表示を切り替えられるかを確認する。
【2】リンク「メニューの表示/非表示を切替」を押下すると、4つのリンクが非表示になるかを確認する。
【3】4つのリンクを非表示にした後、キーボード操作によってフォーカスを移動させていくと、フォーカスがメインコンテンツ部分の「メインコンテンツのリンク」へ移動するかを確認する。
【4】リンク「メニューの表示/非表示を切替」に戻って押下して4つのリンクを表示させた後、キーボード操作によってフォーカスを移動させていくと、フォーカスが「リンク 1」から順に再表示された4つのリンクを経て、メインコンテンツ部分の「メインコンテンツのリンク」へ移動するかを確認する。
【1】○
リンク「メニューの表示/非表示を切替」をクリックすると、4つのリンクの非表示/表示を切り替えられることを確認した。
【2】○
リンク「メニューの表示/非表示を切替」を押下すると、4つのリンクが非表示になることを確認した。
【3】○
4つのリンクを非表示にした後、キーボード操作によってフォーカスを移動させていくと、フォーカスがメインコンテンツ部分の「メインコンテンツのリンク」へ移動することを確認した。
【4】○
リンク「メニューの表示/非表示を切替」に戻って押下して4つのリンクを表示させた後、キーボード操作によってフォーカスを移動させていくと、フォーカスが「リンク 1」から順に再表示された4つのリンクを経て、メインコンテンツ部分の「メインコンテンツのリンク」へ移動することを確認した。
Safari 6.0.5 押下にはリターンキーを使用
NVDA 2012.3 ■操作手順
リンク項目「メニュー」にフォーカスを移動し、Enterキーを押して次のリンクに移動したところ、「メインコンテンツのリンクリンク」と読み上げた。また、「メニュー」に戻ってEnterキーを押して移動したところ、「リンク1リンク、リンク2リンク、リンク3リンク、リンク4リンク」と読み上げた後に「メインコンテンツのリンクリンク」と読み上げた。
■音声読み上げ
メニューリンク メインコンテンツのリンクリンク
メニューリンク リスト7項目リンク1リンク リンク2リンク リンク3リンク リンク4リンク リスト終了メインコンテンツのリンクリンク
PC-Talker 7 2.12 ■操作手順
1 リンク「メニューの表示/非表示を切替」を押下して四つのリンクを非表示にして、「ここはメインコンテンツです」以降に移動
2. リンク「メニューの表示/非表示を切替」を押下して四つのリンクを表示させて、四つのリンクを順に移動
■音声読み上げ
「メニューの表示/非表示を切替 リンク」
Enterキー押下で、メニューを非表示
Ctrl+下矢印キー
「ここはメインコンテンツです。」
「メニューの表示/非表示を切替 リンク」
Enterキー押下で、メニューを表示
Ctrl+下矢印キー
「リンク1」
「リンク2」
「リンク3」
「リンク4」
VoiceOver ■操作手順
リンク項目「メニューの表示/非表示を切替」にフォーカスを移動し、ダブルタップするとメニューが非表示になり、1本指縦フリックで次のリンクに移動したところ、「メインコンテンツのリンク ページ内リンク」と読み上げた。
また、「メニューの表示/非表示を切替」に戻ってダブルタップするとメニューが表示され、1本指フリックで、「リンク1 リンク リンク2 リンク リンク3 リンク リンク4 リンク」と読み上げた後に「メインコンテンツのリンク リンク」と読み上げた。
■音声読み上げ
「メニューの表示/非表示を切替 リンク
メインコンテンツのリンク ページ内リンク」
「メニューの表示/非表示を切替 リンク
リンク 1 リンク リストの開始位置です リンク2 リンク3 リンク リンク4 リンク リストの終了位置です
メインコンテンツのリンク ページ内リンク」
ローターであらかじめ「リンク」に設定