# Youtube すごい裏ワザ！！！ 既出だったらごめんなさい。 これは、ぼくが、友だちに教えてもらった裏技です 初めに Youtube のトップ画面をパソコンで開いてください スマートフォンではだめです。 画面を開いたら Tab キーを 3 回だけ押してくださいそれ以上押してしまうと失敗します（失敗したら、もう一度画面を開き直してください） ぼくは Google Chrome でやりましたが、Firefox だと 2 回だと友だちが言ってました。 上記が成功したら「ナビゲーションをスキップ」というボタンが表示されています。 ![スクリーンショット 2021-11-14 12.49.32](//images.contentful.com/in6v9lxmm5c8/1Rrq4dYjjLnClW3LUAFbCE/203a9b8bde93b1b61252b0ed4fb9df99/____________________________2021-11-14_12.49.32.png) そうしたら、Space キーか Enter キー を押してください。マウスで直接クリックすると失敗します←重要！ 成功したら、メインコンテンツにフォーカスが移動しています。 **結果** ナビゲーションをスキップできる！ ## ナビゲーションをスキップとは？ Tab キーでページを操作したときのみ表示される「ナビゲーションをスキップ」は一般に[スキップリンク](https://weba11y.jp/glossary/sa/skip-link/)と呼ばれるものであり、ウェブアクセシビリティのガイドライン（W3C 勧告）である WCAG 2.0 にある[ブロックスキップ](https://waic.jp/docs/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html)と呼ばれる達成基準を達成する方法として上げられています。 > 2.4.1 ブロックスキップ: 複数のウェブページ上で繰り返されているコンテンツのブロックをスキップするメカニズムが利用できる。 (レベル A) これは、スクリーンリーダーを利用しているユーザーのために提供されてきたものであり [Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-SCRIPT-TECHS/) では画面を見てキーボードだけで操作しているユーザーによっても有用なメカニズムの 1 つとして上げられました。 なお今日のスクリーンリーダーは見出し要素間の移動や WAI-ARIA ランドマーク間の移動ができるようになっており、適切に見出しや WAI=ARIA ランドマークがマークアップされていれば、スキップリンクは無くともおおむね問題ないと言えます。 ## キーボードのみでウェブページを操作する Web アクセシビリティの課題では**キーボードだけでウェブページを操作できること**が求められています。 つまり、キーボード操作のみで要素を選択し、ボタンをクリック、フォーム入力などの操作ができる必要があります。基本的には、**正しいHTMLのマークアップ**ができていればブラウザがキーボードショートカットをサポートしているので、コードを書くときになにか特別な設定をする必要があったりするわけではありません。(正しい HTML のマークアップができていないことが多いのですが・・・) 例えば、Google Chrome では以下のとおりにキーボードショートカットを提供しています。 [Chrome のキーボード ショートカット | ウェブページのショートカット](https://support.google.com/chrome/answer/157179?hl=ja#zippy=%2C%E3%82%BF%E3%83%96%E3%81%A8%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%81%AE%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%2C%E3%83%9E%E3%82%A6%E3%82%B9%E3%81%AE%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%2C%E3%82%A6%E3%82%A7%E3%83%96%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88) 基本的に要素を間を移動するには Tab キーを使用します。`tab` で次の項目を移動し `shift+tab` で 1 つ前の要素を戻ることができます。ボタンクリックなどの操作は Enter キーを使用します。 Tab キーを使い要素が選択され操作できるような状態になっているときは視覚的にそのことを確認できるようにする必要があります。これは CSS の `:focus` 疑似クラスで制御できます。 ### 実際にキーボードのみで操作する 実際にキーボードのみでウェブページを操作可能なのか試してみます。Amazon でログインするまでをやってみましょう。 まずページを開いたら「こんにちは、ログイン」と書かれている要素まで Tab キーを押して移動します。 ![amazon](//images.contentful.com/in6v9lxmm5c8/2jOd8z26KLjftGolljXwmb/eccaf72a0f0d0ce1f58684adf42277fe/amazon.gif) 「こんにちは、ログイン」にフォーカスが当たっている状態になったら Enter キーを押します。そうするとポップアップが出現し「ログイン」ボタンにフォーカスが当たっている状態になっていますので Enter キーを押すとログイン画面へ遷移できます。 ログインを開いたらすでにメールアドレス入力欄にフォーカスが当たっているので通常通りメールアドレスを入力できます。メールアドレスの入力が完了したら Tab キーを一度押し「次に進む」ボタンへフォーカスを移動しましょう。正しいメールアドレスを入力したなら次はパスワード入力画面へ遷移できるはずです。 ![amazon2](//images.contentful.com/in6v9lxmm5c8/6o3SHul6rZ6WiVY0AJY3sr/ac4bd8ff26141a8833424127d958a09f/amazon2.gif) ### 長すぎたナビゲーション 同様に Youtube のトップ画面から好みの動画まで辿りつけつるかを試してみましょう。 ![youtube](//images.contentful.com/in6v9lxmm5c8/1qQnPTzevVMKgfKM0rTPYg/c18098dfd9c4f50bac276a59976ba4cf/youtube.gif) な、長い・・・。 このようにメインコンテンツまで辿り着くまでには毎回すべてのナビゲーションの要素を通過しなければなりません。大抵のユーザーにとって興味があるのはメインコンテンツ内の要素なのですが、このようなナビゲーションはほぼすべてのページに設置されているので毎回気の遠くなるような操作を繰り返さなければいけません。 このようなシチュエーションにスキップリンクは便利です。キーボードで操作してもすぐにメインコンテンツまでたどり着けます。 (Youtube の例が良くないのか、実際に動画に辿り着くまでカテゴリ一覧の要素を通過しなければいけません・・・) ![youtube2](//images.contentful.com/in6v9lxmm5c8/2lYPThG5t1z2JWA6L6oPqP/fb4a5bfe3da6bd401c28258a35a7d8fe/youtube2.gif) ## スキップリンクを実装する それでは、実際にスキップリンクを実装してみましょう。下記のなんの変哲もないサンプルを利用します。 ```html Fixed top navbar example · Bootstrap v5.1

Navbar example

``` ![スクリーンショット 2021-11-14 20.30.10](//images.contentful.com/in6v9lxmm5c8/6wVNLEA6eV4uzSdtov95GY/df322533fcca4b6274bf05627e6847f0/____________________________2021-11-14_20.30.10.png) このウェブページにナビゲーションをスキップしてすぐにメインコンテンツ内のボタンを押せるよう、以下の要件でスキップリンクを作成します。 - 通常は非表示となっており Tab キーを押すまで表示されない - ナビゲーションバーには十分なスペースがないので、ナビゲーションバーの上部に浮かせた状態で表示する - スキップリンクにフォーカスが当たっている状態で Enter キーを押すと、メインコンテンツにフォーカスを移す - フォーカスが外れたら再び非表示にする ### スキップリンクを設置する まずはスキップリンクを単純に設置しましょう。ナビゲーションの一番最初に次のように設置します。ページの一番最初にある要素には一番最初にフォーカスが当たります。 ```diff