要注意
ボタンを押すと開閉するメニュー
スクリーンリーダーのNetReader、FocusTalkでは非表示にしてもフォーカスを受け取るため、スキップできない。ただし、最近のスクリーンリーダーでは問題ない。
表示を切り替えるボタンのラベルと説明文を用いて、そのボタンを使うことによって何が起きるのか（表示と非表示を切り替える）、どこからどこまでが非表示になるのか（表示/非表示が切り替えられる範囲）が分かるようにする必要がある。
達成基準7.2.4.1の意図は、メインコンテンツの先頭へ直接移動できるメカニズムを提供することであり、HTMLのウェブページではSCR28ではなく、H69の使用を推奨する。
なお、JavaScriptが "依存するウェブコンテンツ技術" ではない場合にはSCR28は使用できない。
SCR28の事例2のような場合には、目次がスキップリンクとしての機能を果たすため、これとは別にメカニズムを提供する必要はない。
| ユーザエージェント | 検証結果 | 操作手順 | 備考 |
|---|---|---|---|
| Internet Explorer 6.0 | ○ | 1.[目次の表示 / 非表示]ボタンをクリックすると、4つのリンクがある目次の非表示/表示を切り替えられた 2.[目次の表示 / 非表示]ボタンを押下すると、4つのリンクがある目次が非表示になった 3.目次を非表示にした後、Tabキーを押下するとフォーカスがセクション 1にある「セクション 1のリンク」へ移動した 4.目次を表示させた後、Tabキーを押下していくとフォーカスが「セクション 1」から順に再表示された目次の4つのリンクを経て、セクション 1にある「セクション 1のリンク」へ移動した |
|
| Internet Explorer 7.0 | ○ | 1.ボタンをクリックすると４つのリンクがある目次の非表示、表示が切り換えられる。 2.キーボード操作でボタンをおすと、４つのリンクがある目次の非表示、表示が切り換えられる。 3.目次を非表示にした後に、tabで移動すると次の「セクション１のリンク」に移動する。 4.目次を表示させた後、tabを使っていくと「セクション１」から順番に「セクション１へのリンク」へ移動する。 |
|
| Internet Explorer 8.0 | ○ | 1.ボタンをクリックすると４つのリンクがある目次の非表示、表示が切り換えられる。 2.キーボード操作でボタンをおすと、４つのリンクがある目次の非表示、表示が切り換えられる。 3.目次を非表示にした後に、tabで移動すると次の「セクション１のリンク」に移動する。 4.目次を表示させた後、tabを使っていくと「セクション１」から順番に「セクション１へのリンク」へ移動する。 |
|
| Internet Explorer 9 | ○ | 1:[目次の表示 / 非表示]ボタンをマウス操作でクリックすると、「目次の表示／非表示」を切り替えられることを確認 2:[目次の表示 / 非表示]ボタンを押下すると、目次の４つが非表示になることを確認 3:目次を非表示にした後、Tabキーを押下するとフォーカスがセクション 1にある「セクション 1のリンク」へ移動することを確認 4:目次を表示させた後、Tabキーを押下していくとフォーカスが以下のように移動することを確認 「セクション1」→「セクション2」→「セクション3」→「セクション4」→「セクション1のリンク」 |
1:○ 2:○ 3:○ 4:○ |
| Firefox 3.5 | ○ | 1:目次の表示 / 非表示で4つのリンクがあるブロックの表示、非表示が切り替わる 2:目次の表示 / 非表示にフォーカスを合わせてZEnterを押すと、4つのリンクがあるブロックが消える 3:非表示の状態Tabを押すとセクション1へのリンクに移動する 4:表示の状態でTabを押すと4つのリンクをへてセクション1へのリンクへ移動する |
|
| Firefox 4.0 | ○ | 1:[目次の表示 / 非表示]ボタンをマウス操作でクリックすると、非表示/表示を切り替えられることを確認 2:[目次の表示 / 非表示]ボタンを押下すると、目次は非表示になることを確認 3:目次を非表示にした後、Tabキーを押下するとフォーカスがセクション 1にある「セクション 1のリンク」へ移動することを確認 4:目次を表示させた後、Tabキーを押下していくとフォーカスが以下のように移動することを確認 「セクション1」→「セクション2」→「セクション3」→「セクション4」→「セクション1のリンク」 |
|
| Firefox 9.0 | ○ | 1:[目次の表示 / 非表示]ボタンをマウス操作でクリックすると、「目次の表示／非表示」を切り替えられることを確認 2:[目次の表示 / 非表示]ボタンを押下すると、目次の４つが非表示になることを確認 3:目次を非表示にした後、Tabキーを押下するとフォーカスがセクション 1にある「セクション 1のリンク」へ移動することを確認 4:目次を表示させた後、Tabキーを押下していくとフォーカスが以下のように移動することを確認 「セクション1」→「セクション2」→「セクション3」→「セクション4」→「セクション1のリンク」 |
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 | ○ | ■操作手順 １．[目次の表示 / 非表示]ボタンを押して4つのリンクがある目次を非表示にし、Tabキーを押すとフォーカスがセクション 1にある「セクション 1のリンク」へ移動して「セクション 1のリンク リンク」と読み上げた ２．[目次の表示 / 非表示]ボタンに戻って押して目次を最表示させた後、Tabキーを押していくとフォーカスが目次の「セクション 1」から順に再表示された4つのリンクを経て、セクション 1にある「セクション 1のリンク」へと移動しながら、それぞれのリンクを読み上げた ■音声読み上げ １．「目次の表示 / 非表示 ボタン」 「セクション１のリンク リンク」 ２．「目次の表示 / 非表示 ボタン」 「セクション１ ページ内リンク」 「セクション２ ページ内リンク」 「セクション３ ページ内リンク」 「セクション４ ページ内リンク」 「セクション１のリンク リンク」 |
|
| ホームページ・リーダー 3.04 | ○ | ■操作手順 「目次の表示/非表示」ボタンで目次を非表示にして、Tabを押すと「セクション1へのリンク」に移動して読み上げる 目次を表示してTabを押すと目次のリンクへ順にフォーカスが移動してから、「セクション1へのリンク」に移動する。 ■音声読み上げ 「目次の表示 / 非表示 イベント ボタン セクション１」 |
|
| PC-Talker XP 3.06 | ○ | ■操作手順 1.「以下にある、[目次の表示 / 非表示]ボタンをマウス操作でクリックするか、又はキーボード操作でフォーカスをあててEnterキーを押下すると、目次の内容の表示/非表示が切り替わります。目次の表示 / 非表示 目次、セクション 1のリンク」と読み上げる。ボタン押下したあと、「セクション 1のリンク」へ移動する。 2.「以下にある、[目次の表示 / 非表示]ボタンをマウス操作でクリックするか、又はキーボード操作でフォーカスをあててEnterキーを押下すると、目次の内容の表示/非表示が切り替わります。目次の表示 / 非表示 目次、セクション 1のリンク」 ■音声読み上げ 1.「セクション 1、セクション 2 、セクション 3 、セクション 4 、セクション 1のリンク」 2.「セクション 1、セクション 2 、セクション 3 、セクション 4 、セクション 1のリンク」 |
|
| PC-Talker XP 3.06 + NetReader 1.18 | △ | ■操作手順 [目次の表示 / 非表示]ボタンを押下して4つのリンクがある目次を非表示にした後、Tabキーを押下するとフォーカスは目次内の「セクション 1」へフォーカスして読み上げる。（セクション 1にある「セクション 1のリンク」へ移動して読み上げられない） ■音声読み上げ 「以下にある テン カクカッコ 目次の表示 スラッシュ 非表示 カクカッコトジ ボタンをマウス操作でクリックするか テン 又はキーボード操作でフォーカスをあててエンターキーを押下すると、目次の内容の表示 スラッシュ 非表示が切り替わります マル 目次の表示 スラッシュ 非表示 目次 セクション イチ セクション ニ・・・」 |
[目次の表示 / 非表示]ボタンフォーカスを移動させて押下した後の結果が、操作画面によって異なるため、△とした。 ■分割画面表示でのテキスト画面 ×（目次の内容の表示/非表示が切り替えられない） ■分割画面表示でのグラフィック画面 ○（目次の内容の表示/非表示が切り替えられる） ■テキスト画面（単独表示） ×（目次の内容の表示/非表示が切り替えられない） ■グラフィック画面（単独表示） ○（目次の内容の表示/非表示が切り替えられる） |
| FocusTalk V3 | △ | ■操作手順 1：「目次の表示/非表示」ボタンで目次を非表示にして、Tabを押すと目次のリンクへ順にフォーカスが移動してから、「セクション1へのリンク」に移動する。 2：目次を表示してTabを押すと目次のリンクへ順にフォーカスが移動してから、「セクション1へのリンク」に移動する。 ■音声読み上げ 「目次の表示 スラッシュ 非表示のボタン セクション１」 |
1：× 2：○ |
| NVDA 2010.1j | ○ | ■操作手順 リンク項目「目次の表示 / 非表示」を押下した後Tabキーを押すと、「セクション1のリンクリンク」と読み上げられた。また、「目次の表示 / 非表示」を押下してリンク項目を表示させたところ、Tabキーを押すと「リスト4項目セクション1リンク セクション2リンク セクション3リンク セクション4リンク」と読み上げた後に「リスト終了セクション1のリンクリンク」と読み上げた。 ■音声読み上げ 「目次の表示 / 非表示 セクション1のリンクリンク 目次の表示 / 非表示 リスト4項目セクション1リンク セクション2リンク セクション3リンク セクション4リンク リスト終了セクション1のリンクリンク」 |
|
| NVDA 2011.1 | ○ | ■操作手順 リンク項目「目次の表示 / 非表示」を押下した後Tabキーを押すと、「セクション1のリンクリンク」と読み上げられた。また、「目次の表示 / 非表示」を押下してリンク項目を表示させたところ、Tabキーを押すと「リスト4項目セクション1リンク セクション2リンク セクション3リンク セクション4リンク」と読み上げた後に「リスト終了セクション1のリンクリンク」と読み上げた。 ■音声読み上げ 「目次の表示 / 非表示 セクション1のリンクリンク 目次の表示 / 非表示 リスト4項目セクション1リンク セクション2リンク セクション3リンク セクション4リンク リスト終了セクション1のリンクリンク」 |
|
| Firefox18.0.1 | ○ | 1:[目次の表示 / 非表示]ボタンをマウス操作でクリックすると、「目次の表示／非表示」を切り替えられることを確認 2:[目次の表示 / 非表示]ボタンを押下すると、目次の４つが非表示になることを確認 3:目次を非表示にした後、Tabキーを押下するとフォーカスがセクション 1にある「セクション 1のリンク」へ移動することを確認 4:目次を表示させた後、Tabキーを押下していくとフォーカスが以下のように移動することを確認 「セクション1」→「セクション2」→「セクション3」→「セクション4」→「セクション1のリンク」 |
|
| Google Chrome 25 | ○ | 【1】[目次の表示 / 非表示]ボタンをクリックすると、4つのリンクがある目次の非表示/表示を切り替えられるかを確認する。 【2】[目次の表示 / 非表示]ボタンを押下すると、4つのリンクがある目次が非表示になるかを確認する。 【3】目次を非表示にした後、Tabキーを押下するとフォーカスがセクション 1にある「セクション 1のリンク」へ移動するかを確認する。 【4】[目次の表示 / 非表示]ボタンに戻って押下して目次を表示させた後、キーボード操作によってフォーカスを移動させていくと、フォーカスが「セクション 1」から順に再表示された目次の4つのリンクを経て、セクション 1にある「セクション 1のリンク」へ移動するかを確認する。 |
【1】○ [目次の表示 / 非表示]ボタンをクリックすると、4つのリンクがある目次の非表示/表示を切り替えられることを確認した。 【2】○ [目次の表示 / 非表示]ボタンを押下すると、4つのリンクがある目次が非表示になることを確認した。 【3】○ 目次を非表示にした後、Tabキーを押下するとフォーカスがセクション 1にある「セクション 1のリンク」へ移動することを確認した。 【4】○ [目次の表示 / 非表示]ボタンに戻って押下して目次を表示させた後、キーボード操作によってフォーカスを移動させていくと、フォーカスが「セクション 1」から順に再表示された目次の4つのリンクを経て、セクション 1にある「セクション 1のリンク」へ移動することを確認した。 |
| Safari 6.0.5 | ○ | 押下にはリターンキーを使用 | |
| NVDA 2012.3 | ○ | ■操作手順 リンク項目「目次の表示 / 非表示」を押下した後Tabキーを押すと、「セクション1のリンクリンク」と読み上げられた。また、「目次の表示 / 非表示」を押下してリンク項目を表示させたところ、Tabキーを押すと「リスト4項目セクション1リンク セクション2リンク セクション3リンク セクション4リンク」と読み上げた後に「リスト終了セクション1のリンクリンク」と読み上げた。 ■音声読み上げ 「目次の表示 / 非表示 セクション1のリンクリンク 目次の表示 / 非表示 リスト4項目セクション1リンク セクション2リンク セクション3リンク セクション4リンク リスト終了セクション1のリンクリンク」 |
|
| PC-Talker 7 2.12 | ○ | ■操作手順 1 ボタン「目次の表示/非表示」を押下して目次を非表示にして、「セクション1」以降に移動 2. ボタン「目次の表示/非表示」を押下して目次を表示させて、目次のリンクを順に移動 ■音声読み上げ 「目次の表示/非表示 のプッシュボタン 確認」 Enterキー押下で、目次を非表示 Ctrl＋下矢印キー 「セクション1」 「目次の表示/非表示 のプッシュボタン 確認」 Enterキー押下で、目次を表示 Ctrl＋下矢印キー 「目次」 「セクション1」 |
|
| VoiceOver | ○ | ■操作手順 リンク項目「目次の表示 / 非表示」をダブルタップした後、１本指フリックすると、「セクション1のリンク リンク」と読み上げられた。 また、「目次の表示 / 非表示」を押下してリンク項目を表示させたところ、Tabキーを押すと「リスト4項目セクション1リンク セクション2リンク セクション3リンク セクション4リンク」と読み上げた後に「リスト終了セクション1のリンクリンク」と読み上げた。 ■音声読み上げ 「目次の表示 / 非表示 セクション1のリンク リンク」 「目次の表示 / 非表示 セクション1 ページ内リンク セクション2 ページ内リンク セクション3 ページ内リンク セクション4 ページ内リンク リストの終了位置です セクション1のリンク リンク」 |
ローターであらかじめ「リンク」に設定 |