この記事でわかること

  • どのページにも繰り返し出るメニューを飛ばすために、WCAGの達成基準2.4.1が求めること
  • スキップリンク(本文へ移動するリンク)のHTMLとCSSの書き方の例
  • Tabキーを使って、スキップリンクが働くかを確かめる手順
  • 移動先のid、見えなくする方法など、つまずきやすいところ

Webサイトのページの上には、ロゴやメニューのリンクが並ぶことがよくあります。マウスなら本文のリンクを直接選べますが、Tabキーで1つずつ移る人は、ページを開くたびにメニューのリンクを全部たどらないと本文に着きません。この記事では、ページの最初に「本文へ移動」のリンクを置いて、その手間をなくす方法をまとめます。

材料にしたのはW3Cの資料(WCAG 2.2の本文、Understanding、技法G1・G124・ARIA11・H69)で、2026年10月25日に原文を読んでいます。書き方の例は、作業PCのブラウザに実際にTabキーとEnterキーを送り、フォーカスがどこへ移るかを確かめました。

先に結論: ページの最初に、本文へ移るリンクを置く

先に結論を書くと、ページで最初にフォーカスが当たる所に「本文へ移動」のリンクを置き、押すとフォーカスが本文の始まりへ移るようにします。 技法G1の確かめ方を、5つの項目にまとめました。

確かめること 目安
置く場所 最初のリンク
リンクの文言 本文へ移ると分かる
見え方 常に、またはフォーカス時
押した後 本文へ移る
フォーカス 本文に移っている

繰り返しの部分を飛ばすアクセシビリティの基準

WCAG 2.2の達成基準2.4.1(Bypass Blocks)は、レベルAの基準です。複数のWebページで繰り返し出てくるまとまりを飛ばす仕組みがあることを求めています。

W3Cの解説では、ねらいを、内容を順に移っていく人が、ページの主な内容により直接たどり着けるようにすることだとしています。繰り返しのまとまりの例は、ナビゲーションのリンク、ヘッダー、広告の枠などです。1語や1つのリンクのような小さな繰り返しは、この基準でいうまとまりには当たりません。

また、ブラウザがすでに持っている機能と同じものを作ることまでは求めていません。多くのブラウザにはページの先頭へ戻るキー操作があるため、ナビゲーションのリンクがページの下にあるなら、スキップリンクは要らないかもしれないとしています。

スキップリンクが役立つ人

W3Cの解説では、この基準を満たしていないと、障害のある人の中には、主な内容へすばやくたどり着くのが難しい人がいるとしています。挙げられているのは、次のような人です。

  • 画面読み上げを使う人は、同じサイトのページを開くたびに、ヘッダーと数十のメニューのリンクを聞かずに済みます
  • キーボードだけで操作する人は、少ないキー操作で本文に着けます。そうでないと、本文のリンクに着くまでに何十回もキーを押すことになり、人によっては体に強い痛みが出ることもあるとしています
  • 画面拡大ソフトを使う人は、ページを開くたびに同じヘッダーを探し回らずに、本文の始まりを見つけられます

書き方の例: 本文へ移動するリンク

次の例は、技法G1の考え方をもとに、制作会社のサービス案内のページを想定して書いたものです。bodyの最初に、本文(main要素)へ移るリンクを置いています。リンクはふだんは画面の外に出しておき、フォーカスが当たったときだけ画面の左上に出るようにしています。

<style>
  .skip-link {
    position: absolute;
    left: 0;
    top: -40px;
  }
  .skip-link:focus {
    top: 0;
  }
</style>

<a class="skip-link" href="#main">本文へ移動</a>
<header>
  <nav aria-label="サイト内">
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/works/">制作実績</a></li>
      <li><a href="/contact/">お問い合わせ</a></li>
    </ul>
  </nav>
</header>
<main id="main" tabindex="-1">
  <h1>サービスのご案内</h1>
  <p>くわしくは<a href="/flow/">ご依頼の流れ</a>をご覧ください。</p>
</main>

リンクのhrefの「#main」と、main要素のidの「main」をそろえることで、押したときの移動先が決まります。main要素に付けたtabindex="-1"は、Tabキーの順番には入れずに、プログラムからフォーカスを受け取れるようにするための指定です。リンクの文言は、どこへ移るかが分かるように「本文へ移動」としました。

手順: Tabキーで5つのことを確かめる

技法G1の確かめ方に沿って、マウスを使わずに次の順で確かめます。

  1. ページを開き直し、Tabキーを1回押して、最初にフォーカスが当たるのがスキップリンクかを見ます
  2. リンクの文言が、本文へ移ることを伝えているかを読みます
  3. リンクがいつも見えているか、フォーカスが当たったときに見えるかを確かめます
  4. Enterキーでリンクを押し、画面が本文の始まりへ移るかを見ます
  5. もう一度Tabキーを押し、本文の中のリンクへ進むか(フォーカスが本文に移ったか)を確かめます

技法G1では、5つすべてが当てはまることを、満たす条件にしています。

試した結果

上の例のHTMLを、作業PCのブラウザで開き、実際にTabキーとEnterキーを送って、フォーカスの位置を読み取りました。

  • 1回目のTabキーで、スキップリンクにフォーカスが当たりました
  • フォーカスが当たる前のリンクは画面の上の外(上端が-40ピクセル)にあり、フォーカスが当たると画面の左上(上端が0)に出ました
  • Enterキーを押すと、アドレスの末尾が「#main」になり、フォーカスがmain要素に移りました
  • 続けてTabキーを押すと、メニューのリンクを飛ばして、本文の「ご依頼の流れ」のリンクへ進みました

確かめた環境は、Mac の作業PCの Google Chrome 155 を画面なし(ヘッドレス)で動かしたものだけです。ほかのブラウザや、画面読み上げソフトでの動きは試していません。

自分で直すか、相談するかの判断

判断の目安は、「ページの主な内容が1か所にまとまっているか」です。技法G1は、主な内容が1か所にあり、ナビゲーションが何か所にも分かれていないページで最も役立つとしています。ブログの記事やサービス案内のように本文が1つなら、この記事の例のように、本文へ移るリンクを1つ置けば足ります。

ポータルサイトのように、同じくらい大事なまとまりがいくつも並ぶページでは、各まとまりへのリンクを、小さな目次のようにページの最初に並べる方法(技法G124)があります。ほかにも、ランドマークで領域を示す方法(技法ARIA11)や、各まとまりの始めに見出しを置く方法(技法H69)も、この基準を満たす方法として挙げられています。見出しの付け方は、Webデザインで見出しの階層を正しく付ける方法が参考になります。

サイト全体のテンプレートやテーマの作りに関わるため、自分で直すのが難しいときは、サイトを作った人に「最初のTabキーでスキップリンクに当たるか」「押した後に本文へ移るか」の2点を伝えて相談します。

つまずきやすいところ

  • display:noneで隠してしまう: 試したChromeでは、スキップリンクをdisplay:noneで隠すと、1回目のTabキーでメニューの「ホーム」にフォーカスが当たり、スキップリンクは一度も選べませんでした。見えなくするときは、画面の外に出す方法にします
  • hrefとidが合っていない: hrefを「#content」にしたままmain要素のidを「main」にすると、試したChromeでは、Enterキーを押してもフォーカスはスキップリンクに残り、次のTabキーでメニューの「ホーム」へ進みました
  • スキップリンクをメニューの後に置く: メニューの後ろに置くと、1回目のTabキーでメニューのリンクに当たります。技法G1では、スキップリンクがページで最初にフォーカスできる部品であることを確かめるとしています
  • 移動先にtabindexを付けない: 試したChromeでは、main要素にtabindex="-1"が無くても、Enterキーの後のTabキーは本文の「ご依頼の流れ」へ進みました。ただし、Enterキーの直後のフォーカスはmain要素ではなくbody要素にありました。フォーカスが本文に移ったことをはっきりさせるため、この記事の例では付けています
  • フォーカスの枠が見えない: スキップリンクに当たっても、フォーカスの枠が見えないと、どこにいるか分かりません。枠の見せ方は、Webデザインでキーボードだけで操作できるかを確かめる方法にまとめています
  • リンクの文言があいまい: 「こちら」のような文言では、どこへ移るかが伝わりません。リンクの文言の決め方は、Webデザインでリンクの文言を分かりやすくする方法にあります

まとめ

  • WCAG 2.2の達成基準2.4.1(レベルA)は、複数のページで繰り返し出るまとまりを飛ばす仕組みを求めています
  • 本文が1つのページでは、最初にフォーカスが当たる所に「本文へ移動」のリンクを置き、押すと本文の始まりへフォーカスが移るようにします
  • リンクはいつも見せておくか、フォーカスが当たったときに見えるようにします。display:noneでは隠さないようにします
  • 確かめるときは、マウスを使わずにTabキーとEnterキーだけで、5つの項目をたどります