スキップリンク：パワーユーザーが必要とする2秒のショートカット

スキップリンク（スキップナビゲーション）が必要な理由、Shopifyでの実装方法、タスク完了時間の短縮効果について。

ほとんどのECサイトでTabキーを押してカウントしてみてください。1、2、3……まだヘッダーの中です。10、15、20……ナビゲーションメニューを抜けました。25回タップしてやっとメインコンテンツに到達します。

マウスユーザーにとってヘッダーは見えない存在です。キーボードユーザーにとっては、ページを読み込むたびに、また前に訪れたページに戻るたびに越えなければならない壁です。30項目のメガメニューを持つストアでは、この壁を越えるのに1分以上かかる可能性があります。

スキップナビゲーションリンクはこの問題を2秒で解決します。Tabキーを1回押してEnterキーを押せば、コンテンツに到達します。ウェブ開発で最もシンプルなアクセシビリティ機能ですが、ほとんどのShopifyストアにはなく、あっても正しく実装されていないものが多いのが現状です。

要点

WCAG 2.4.1（レベルA）は繰り返されるコンテンツブロックを回避するメカニズムを要求しており、スキップリンクは標準的なソリューションです
平均的なECサイトのヘッダーは、キーボードユーザーをメインコンテンツに到達する前に20～40回のタブストップを強要します
スキップリンクはナビゲーションのオーバーヘッドを30秒以上から2秒以下に短縮します
上位100万のウェブサイト中わずか32%しか機能するスキップリンクを持っていません（WebAIM 2024）
GitHub、Amazon、Googleはすべてスキップリンクを使用しており、特殊なケースではなく標準的な実装です

スキップリンクが必要な理由

すべてのウェブサイトには繰り返されるコンテンツブロックがあります。ロゴ、メインナビゲーション、検索バー、プロモーションバナー、ログイン・カートリンク付きユーティリティバー。マウスユーザーはこれらを瞬時にスキップします。目がコンテンツに飛び、カーソルが追従します。

キーボードユーザーにはそのような贅沢はありません。タブ順序は直線的です。ヘッダーのすべてのインタラクティブ要素が順序通りに訪問されます。ロゴリンク、各ナビ項目、検索ボタン、カートアイコン、アカウントリンク。メガメニューが展開可能な場合、各サブメニュー項目がカウントに加わります。

WCAGの成功基準2.4.1（ブロックの回避）はまさにこの問題に対応するために存在します。最小レベルのコンプライアンスであるレベルAでは、「複数のウェブページで繰り返されるコンテンツのブロックを回避するメカニズム」が必要です。

スキップナビゲーションリンクは普遍的に受け入れられたソリューションです。W3C Web Accessibility Initiativeは、2.4.1を満たすための推奨手法としてこれをリストアップしています。

スキップリンクがない場合、問題はどの程度深刻ですか？

この問題を定量化するために、典型的なShopifyストアのヘッダーを考えてみます。

要素	タブストップ数
ロゴ（リンク）	1
メインナビゲーション項目（6カテゴリ）	6
カテゴリごとのメガメニューリンク（平均8）	48
検索ボタン	1
アカウント/ログイン	1
カートアイコン	1
プロモーションバナーリンク	1
言語/通貨セレクタ	2
合計	61

Tab押下あたり約0.5秒で計算すると、メインコンテンツに到達する前に30秒のオーバーヘッドがあります。ページを読み込むたびに。ユーザーが1つのセッションで5ページを訪問する場合、それは同じナビゲーションをタップしているだけで2.5分です。

スクリーンリーダーユーザーはさらに深刻にこれを経験します。各タブストップは単なる視覚的なジャンプではなく、スクリーンリーダーは要素をアナウンスします。「リンク、レディース服。リンク、メンズ服。リンク、キッズ。リンク、セール……」各アナウンスには1～2秒の音声がかかります。

機能するスキップリンクがあれば、すべてのこれらが排除されます。

スキップリンクのしくみ

スキップリンクはメインコンテンツ領域をターゲットとするアンカーリンクです。ページ上の最初にフォーカス可能な要素です。つまり、ユーザーがTabキーを押したときに最初に表示されるものです。

基本的な実装

HTMLは最小限です。

<!-- <body>内の最初の要素 -->
<a href="#main-content" class="skip-link">コンテンツにスキップ</a>

<!-- ...ヘッダー、ナビゲーションなど... -->

<!-- メインコンテンツ領域 -->
<main id="main-content" tabindex="-1">
  <!-- ページコンテンツはここ -->
</main>

<main>要素のtabindex="-1"は重要です。これがないと、スキップリンクがアクティブになったときに、一部のブラウザがターゲットにフォーカスを移しません。要素は、通常のタブ順序に表示されるべきではありませんが、プログラムで操作可能にフォーカス可能である必要があります。

CSS：フォーカス時に表示、それ以外は非表示

スキップリンクは通常、ユーザーがTabキーを押すまで非表示です。これはマウスユーザーにとっては見えないままにしながら、キーボードユーザーが最初に遭遇するものにします。

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
}

.skip-link:focus {
  position: fixed;
  top: 10px;
  left: 10px;
  width: auto;
  height: auto;
  padding: 12px 24px;
  background: #000000;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 100000;
}

スキップリンクがフォーカスを受けると（ユーザーがTabキーを押す）、左上角の固定位置に表示されます。大きく、高コントラストで、見逃せません。フォーカスがそれを越えると、再び消えます。

なぜ`display: none`は機能しないか

スキップリンクをdisplay: noneまたはvisibility: hiddenで非表示にするのは一般的な誤りです。

/* これをやめてください */
.skip-link {
  display: none;
}
.skip-link:focus {
  display: block;
}

display: noneの要素は完全にタブ順序から削除されます。スキップリンクはフォーカス不可になり、存在しないも同然です。

正しい手法は画面外ポジショニングを使用します。要素はまだDOMにあり、タブ順序内にあります。フォーカスされるまで視覚的に誰も見えない場所に配置されているだけです。

Shopifyでのスキップリンク実装

スキップリンクをShopifyストアに追加するには、テーマのレイアウトファイルを編集する必要があります。ステップバイステップのプロセスです。

ステップ1：theme.liquidを編集

Shopifyテーマエディタを開き、Layout > theme.liquidに移動します。開き<body>タグを見つけ、直後にスキップリンクを追加します。

<body>
  <a href="#MainContent" class="skip-link">コンテンツにスキップ</a>
  <!-- テーマの残り... -->

ステップ2：ターゲットIDを追加

メインコンテンツが始まる場所を見つけます。ほとんどのShopifyテーマでは、これは<main>タグまたは特定のクラスを持つ<div>です。ターゲットIDを追加します。

<main id="MainContent" role="main" tabindex="-1">

多くのShopifyテーマには既にid="MainContent"を持つ要素があります。重複を追加する前にテーマを確認してください。

ステップ3：CSSを追加

スキップリンクスタイルをテーマのCSSファイルに追加します。前のセクションのスタイルを使用し、ブランドに合わせて色を調整します。

ステップ4：テスト

ストアのホームページでTabキーを押します。スキップリンクが左上角に表示されるはずです。Enterキーを押します。フォーカスがメインコンテンツ領域にジャンプし、ヘッダー全体を回避するはずです。

複数のページ（商品ページ、コレクションページ、カート、チェックアウト）でテストして、スキップリンクが一貫して機能することを確認します。

複数のスキップリンク

ページに複数のコンテンツ領域（サイドバーフィルタ、商品グリッド、フッターナビゲーション）がある場合、サイトは複数のスキップリンクの恩恵を受けることができます。

<div class="skip-links">
  <a href="#MainContent" class="skip-link">コンテンツにスキップ</a>
  <a href="#ProductGrid" class="skip-link">商品にスキップ</a>
  <a href="#SearchBar" class="skip-link">検索にスキップ</a>
</div>

各追加スキップリンクは、ユーザーが前のものをTabキーで越えたときに表示されます。最初のTabキー「コンテンツにスキップ」を表示、2番目は「商品にスキップ」、3番目は「検索にスキップ」を表示します。

このパターンは控えめに使用してください。2～3つのスキップリンクは有用です。10個のスキップリンクは目的に反しています。あなたは単に別のブロックを回避するために作成しているだけです。

トップサイトがこれをどのように処理しているか

GitHub：2つのスキップリンク「コンテンツにスキップ」と「フッターナビゲーションにスキップ」
Amazon：1つのスキップリンク「メインコンテンツにスキップ」
Google：1つのスキップリンク「メインコンテンツにスキップ」（検索結果に表示）
BBC：3つのスキップリンク「コンテンツにスキップ」、「アクセシビリティヘルプ」、「ライブチャットにスキップ」

業界の合意は、1～2つのスキップリンクは95%のユースケースをカバーしているということです。

よくある実装上の誤り

最もシンプルなアクセシビリティ機能の1つであるにもかかわらず、スキップリンクは驚くほど頻繁に失敗します。WebAIMの2024年ミリオンホームページレポートによると、上位100万のウェブサイト中わずか32.4%しか機能するスキップリンクを持っていません。

最も一般的な失敗はこれらです。

誤り1：スキップリンクはどこにも行かない

スキップリンクは存在しますが、ターゲットIDが一致しません。

<!-- リンクは#mainをターゲット -->
<a href="#main" class="skip-link">コンテンツにスキップ</a>

<!-- しかしコンテンツには別のIDがある -->
<main id="MainContent">

スキップリンクでEnterキーを押しても何も起こりません。ユーザーは困惑したままです。

解決策： href値がターゲット要素のidと一致していることを確認してください。スキップリンクをクリックしてテストしフォーカスが移動するかどうかを確認してください。

誤り2：ターゲットはフォーカス可能ではない

tabindex="-1"がない場合、一部のブラウザはターゲットにフォーカスを移しません。

<!-- tabindexが欠落 -->
<main id="MainContent">

URLハッシュが変わり（アドレスバーで#MainContentが見えます）、フォーカスは元の場所にとどまります。ユーザーがTabキーを押すと、最初のコンテンツ要素ではなく次のヘッダー要素を取得します。

解決策： ターゲット要素にtabindex="-1"を追加してください。

誤り3：スキップリンクは決して表示されない

一部の実装ではスキップリンクを永続的に非表示にしています。

.skip-link {
  display: none !important;
}

これはWCAGに違反しています。スキップリンクはフォーカス時に表示される必要があります。デフォルトではオフスクリーンにすることができますが、フォーカス時には表示される必要があります。

解決策： 上記で説明したオフスクリーンポジショニング手法を使用してください。display: noneではなく。

誤り4：スキップリンクが他の要素の後に表示される

スキップリンクが最初にフォーカス可能な要素でない場合、目的が損なわれます。ユーザーはそれに到達する前に他の要素をタップします。

<body>
  <div class="promo-bar">
    <a href="/sale">サマーセール - 20%オフ</a>
  </div>
  <a href="#MainContent" class="skip-link">コンテンツにスキップ</a>

ここでは、プロモーションバナーリンクが最初にフォーカスを取得します。スキップリンクは2番目です。

解決策： スキップリンクを<body>の非常に最初の子として配置してください。バナー、ヘッダー、または他のコンテンツの前。

スキップリンクとスクリーンリーダー

スキップリンクはすべてのキーボードユーザーに利益をもたらしますが、スクリーンリーダーユーザーに特に重要です。

スクリーンリーダーがページを遭遇すると、DOMの順序で要素を読みます。スキップリンクがない場合、ユーザーはすべてのページでヘッダー全体を聞きます。「バナー、リンク、Navi Plus。ナビゲーション、リスト、6項目。リンク、レディース服。リンク、メンズ服……」これはページあたり30～60秒かかります。

スキップリンクがあれば、スクリーンリーダーは次のようにアナウンスします。「リンク、コンテンツにスキップ」ユーザーはEnterキーを押して、ページの見出しまたは最初の段落をすぐに聞きます。

最新のスクリーンリーダーには組み込みのランドマークナビゲーションもあります（Hキーを押して見出しにジャンプ、1～6キーで見出しレベル、Dキーでランドマーク）。しかし、スキップリンクは、セマンティックHTMLが完璧でない場合でも機能するユニバーサルフォールバックです。

ShopifyテーマチェックShopify Dawnベースのテーマ（2.0以上）を使用している場合、スキップリンクは既に組み込まれています。theme.liquidで「skip」を検索して確認してください。古いテーマまたはカスタムテーマを使用している場合、手動で追加する必要があります。

スキップリンクのスピード引数

スキップリンクはアクセシビリティコンプライアンスだけではありません。それは生産性機能です。

毎週注文を行うB2B購入者を考えてください。彼らはあなたのストアにアクセスし、ブックマークを介してコレクションページに直接行き、製品の追加を開始します。キーボードナビゲーション（多くのデータ入力プロフェッショナルが使用している）を使用している場合、ページのリロードはそのたびにヘッダーを再度強制します。

スキップリンクなし：1ページあたり30秒のヘッダータッピング、1セッションあたり20ページ = ナビゲーションで無駄にされた10分。

スキップリンク付き：1ページあたり2秒、1セッションあたり20ページ = 合計40秒。

それはナビゲーションオーバーヘッドの93%削減です。頻繁に購入者にとって、これは「許容」と「効率的」の違いです。それは1回限りの顧客を常連客に変えるような詳細です。

Navi+ Menu Builderなどのツールは、スキップリンクとキーボードナビゲーションがそのまま機能するナビゲーション構造を生成することで支援できます。つまり、これらのパターンがそのために設計されなかったテーマにレトロフィットする必要がありません。

テストチェックリスト

スキップリンク実装を完了と見なす前に、これらの各項目を確認してください。

新しいページ読み込みでTabキーを押します。スキップリンクがビューポートの上部に視覚的に表示されます。
スキップリンクでEnterキーを押します。フォーカスがメインコンテンツに移動します（Tabキーで確認します。次にフォーカスされた要素はヘッダーではなくメインコンテンツ内にあるはずです）。
スキップリンクは十分なコントラストを持っています（通常サイズのテキストなので4.5:1）。
スキップリンクはすべてのページタイプで動作します。ホームページ、コレクション、製品、カート、検索結果、ブログ。
モバイル（ブラウザdev toolsでテスト）では、スキップリンクは引き続き表示され、正しく機能します。
スキップリンクはページの最初にフォーカス可能な要素です。他に何もそれより前にフォーカスを取得します。
スキップリンクを使用した後、Shift+Tabキーを押すと、フォーカスはヘッダーに戻り（スキップリンクに戻る)。

これらの7つすべてが合格した場合、スキップリンク実装は堅実です。構築に15分かかり、キーボードユーザーの時間を数時間節約します。

This article is part of the larger guide on キーボードナビゲーション：アクセシビリティを超えた重要性.

キーボードナビゲーション：アクセシビリティを超えた重要性