本文へスキップ
Tab を1回押すと最初に「本文へスキップ」が現れ、Enter でナビ4件を飛ばして本文へフォーカスが移る。下の帯に今どこにフォーカスがあるかを表示。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- スキップリンクは DOM の先頭に置く。Tab の1回目に来なければ、毎ページ4〜40回 Tab を押す人の時間は戻らない
- フォーカスが当たるまでは見えなくてよいが、当たったら必ず見える位置に出す。display:none は Tab 自体が止まるので使わない
- 飛び先の main に tabindex="-1" を付ける。無いと URL のハッシュだけ変わり、読み上げの位置が動かない
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="skp-stage">
<a class="skp-link" href="#skp-main" id="skp-link">本文へスキップ</a>
<header class="skp-header">
<span class="skp-logo">ミナト工房</span>
<nav class="skp-nav" aria-label="グローバル">
<a href="#skp-nav-1">製品</a><a href="#skp-nav-2">料金</a><a href="#skp-nav-3">導入事例</a><a href="#skp-nav-4">サポート</a>
</nav>
</header>
<main class="skp-main" id="skp-main" tabindex="-1">
<h1>見積もりを3分で</h1>
<p>型番と数量を入れるだけ。担当者の確認なしに概算が出ます。</p>
<div class="skp-ctas">
<button type="button" class="skp-cta">見積もりを始める</button>
<button type="button" class="skp-sim" id="skp-sim">Tab を押す（模擬）</button>
</div>
</main>
<div class="skp-band"><span class="skp-tag">フォーカス</span><span id="skp-band">枠内をクリックして Tab を押すと、最初に「本文へスキップ」が現れます</span></div>
</div>