スキップリンクの確認方法｜本文への移動とTabキーの行き先を確かめる

本文へ進むリンクを使っても、次のTabが本文へ進むとは限りません。企業サイトのWeb担当へ、同じ開始位置から画面と操作対象を分けて確かめる手順を説明します。

先頭からリンクを起動し、画面位置・今の操作対象・次のTabの対象を別に確認。リンクの行き先と本文の識別名を照合し、必要箇所だけ直して同条件で再確認します。

どの本文へ、何の操作で進む？

本文へ進むリンクは、複数のページで繰り返される会社名や案内を一つずつ通らず、そのページの主要な内容へ進むための入口です。製品の条件を読みたい人が、毎回同じ案内を通る負担を減らします。スキップリンクとも呼ばれます。W3C：繰り返す内容を飛ばす目的

点検するページ、読みたい本文、最初に本文内で使いたいリンクを選びます。URL、ブラウザー、画面幅、ページ先頭から始めたことを同じ条件で残してください。ここで使うTabは次の操作対象へ進むキー、ShiftとTabを一緒に押す操作は前へ戻るキーです。標準のリンクは、操作対象になった状態でEnterを押して起動します。

フォーカスは、キーボードから今操作できる対象のことです。枠などの印で位置を読むことと、画面に本文が見えることは別に確認します。ブラウザーや利用環境によってキーの扱いが異なる場合は、その条件も残します。この記事では本文へ進むリンクの一経路を扱い、サイト全体の操作点検へ広げません。W3C：キーボード操作と環境の慣習

本文へ進むリンクを見つけられる？

ページ先頭からTabを押し、最初の操作対象と、本文へ進むことが分かるリンク文言を読みます。リンクが常に表示されている場合と、フォーカスを受けたときに表示される場合があります。起動できる位置で文言と現在位置を確認してください。W3CのG1は、こうした先頭リンクを扱う実装技法の一つです。W3C：先頭リンクの可視性と起動後の確認

Tabを押す前に見えないことだけで、HTMLにも存在しないとは判断できません。HTMLはページの要素や内容を表す記述です。担当者は該当リンクがあるか、リンクに移ったときの表示、前後の移動順を分けて確認します。原票の第三例はリンクの表示や行き先がまだ未確認であり、「リンクなし」という記録ではありません。

リンクに到達しても文言が画面外にある、別の表示に隠れる、現在位置の印が読めない場合は、その条件を残します。CSSは表示を整える指定です。該当リンクの通常時とフォーカス時の指定、重なりや配置を担当者が読んで、必要な範囲だけを直します。フォーカスの印を消す指定を増やさず、既存の標準表示が読めるかも確かめます。W3C：今の操作対象が分かる表示

Enter後、画面と次のTabはどこへ？

リンクに移ったらEnterを押し、まず本文の先頭がどこに表示されたかを読みます。続いて起動直後のフォーカスを確かめ、次のTabを押して実際に移った対象を読みます。画面の表示位置、起動直後の対象、次の対象を一つの結果にまとめないことが要点です。

一つ目の架空記録では本文の先頭が画面に出ましたが、Enter直後の操作対象は未確認で、次のTabはサイトのロゴリンクでした。二つ目は別の記録で、Enter直後が本文の領域、次のTabが本文の製品条件リンクです。同じ本文が見えたという結果だけで、この違いを説明できません。

二つ目を一つ目の修正後とは扱いません。両記録の個別原因と修正後の結果は未確認です。一つ目からJavaScriptやテーマの原因を確定したり、二つ目から全機能が使えると判断したりはできません。W3C：本文側へ進むリンクの確認例

PC用の原画・スマホ用の原画

三つの架空記録は図の下の補足で、画面・Enter直後・次のTabを項目ごとに読み比べられます。未確認の項目を、リンクがない・正常・修正できたという結果へ置き換えません。

リンク先とフォーカスの実装をどう確かめる？

担当者はリンクのhrefと、そのページ内のidを照合します。hrefはリンクの行き先を指定する属性で、#main-contentのような#から始まる部分は同じページ内の識別名を指定します。idはその要素を識別する名前で、ページ全体で同じ名前を重ねないようにします。行き先が存在し、その要素が意図する本文かを読みます。MDN：idの一意性とページ内リンク

mainはページの主要な内容を表すHTML要素です。ロゴや繰り返す案内とは本文を分け、既存の本文領域と行き先の関係を確認します。次の説明用断片はhrefとidの対応だけを示しています。同じ対応がすでにある場合に重ねて追加する例ではなく、これだけで次のTabの結果を保証するものでもありません。MDN：mainと本文へ進むリンク

<a href="#main-content">本文へ進む</a>
<!-- 会社名や繰り返す案内 -->
<main id="main-content">
  <!-- 本文と、その中で使うリンク -->
</main>

対応が正しければ、まず既存の標準リンクを同じ環境で起動し、本文側のフォーカスと次のTabを確かめます。スクリプトはページの処理を動かす記述ですが、画面をスクロールする処理とフォーカスを設定する処理は役割が異なります。既存の処理を調べずに、ページ全体のスクリプトを無効にしたり、テーマを初期化したりしません。

プログラムから本文領域へフォーカスを設定する必要が確認された場合は、対象がフォーカスを受けられるかを調べます。tabindex="-1"は、通常のTab順には加えず、プログラムからフォーカスを設定できるようにする用途があります。tabindex="0"でTab順へ加えることとは別で、すべての要素へ同じ指定を足す方法ではありません。属性だけで原因や修正完了を判断せず、該当リンクと対象に限って処理を確かめます。MDN：Tab順とフォーカス設定の違い

対象が見え、前後へ戻れる？

起動後の本文が固定ヘッダーの下へ隠れていないか、現在位置の印が見えるかを確かめます。固定ヘッダーは画面上部に残る案内です。本文の行き先や表示位置を調整する場合は、該当する本文と案内の重なりを見て、ほかのページ内リンクへの影響も担当者が確認します。画面を移動しただけでは、フォーカスが移ったとは扱いません。

次のTabで本文のリンクへ進んだら、その対象が本文で期待したものかを読みます。ShiftとTabで前へ戻れることも同じ条件で確かめ、意図しない場所へ閉じ込められていないかを見ます。HTML上の意味に沿った順序を整え、正のtabindexの数値で見た目だけの順番を作り直さないようにします。MDN：意味の順序とフォーカス表示

一般のキーボード操作、入力、見出し、拡大まで広げた点検は、企業サイトのアクセシビリティ点検の記事へつなげます。ボタンの文字やリンクURLを編集する操作は、WordPressのボタンと表示先本文の記事で扱っています。今回は、繰り返す案内を飛ばして本文の操作へ進む一経路を確認します。

同じ条件で何を再確認する？

対象の表示やhref・id・フォーカス処理を直したら、同じページとブラウザー、幅、開始位置から、Tabでリンクへ進む、Enterで起動する、起動直後を読む、次のTabへ進む、ShiftとTabで前へ戻る、という順で再確認します。どの操作まで確認でき、どこが未確認かを分けて残します。

変更後には、該当リンクの表示と行き先だけでなく、その変更が影響する別のページ内リンクも確認します。元の版と変更した箇所をそろえておくと、問題が続いた場合に対象を絞って戻せます。原票では三例とも修正後の結果は未確認なので、この記事の比較を修正成功の記録に使うことはできません。

簡易点検で一経路が使えても、サイト全体のアクセシビリティやWCAG全体への適合を証明したことにはなりません。WCAGはWebのアクセシビリティを評価するための指針で、G1は実装方法の一例です。対象範囲を広げる評価は別に計画します。この確認をフォーム送信や会社の受付結果にも置き換えません。W3C：初期点検の範囲