本文へ移動
ご相談

繰り返すナビゲーションを飛ばせないスキップリンク

スキップリンクを display: none で隠し、本文もただの div に置いているため、メニューを飛ばす手段がありません。

SC 2.4.1A エージェント向けMarkdown
01

問題

キーボード利用者が、どのページでもメニュー全体をTabで移動しないと本文にたどり着けません。

02

試してみる

Tabキーで最初の商品まで移動してください。

本文までの移動回数を数えてください。修正後は、最初の移動先でEnterを押してください。

コンテンツへスキップ
アカウント 買い物かご

本文までの移動回数： 0

スクリーンリーダーのランドマークと見出しの一覧：

（なし）

再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。

03

修正方法

スキップリンクをフォーカス時に表示してmain要素に向けるか、ランドマークと見出しでページを構成します。

  1. 1本文をmain要素に入れ、移動先を用意する。
  2. 2スキップリンクは最初のTab移動先にし、フォーカス時に表示して、移動先へフォーカスを移す。
  3. 3スキップリンクは見た目だけ隠し、display: none は使わない。
修正前 誰も使えないスキップリンク

html

<a class="skip-link" href="#content">Skip to content</a><div class="header">  <a href="/">Fernway Garden</a>  <ul class="menu">…12 category links…</ul>  <input type="search" aria-label="Search">  <a href="/account">Account</a> <a href="/basket">Basket</a></div><div class="content">  <p class="title">Spring bulbs</p>  …</div>

css

.skip-link { display: none; }
修正後

フォーカス時に表示するスキップリンク

html

<a class="skip-link" href="#main">Skip to main content</a><div class="header">…</div><main id="main" tabindex="-1">  <h1>Spring bulbs</h1>  …</main>

css

.skip-link {  position: absolute;  left: 8px;  top: 8px;  transform: translateY(-200%);}.skip-link:focus {  transform: none;}

04

修正の確認

マウスを使わない5つの確認

確認方法： キーボード、スクリーンリーダー、ズーム

5件中0件を確認済み

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。ヘッダーやレイアウトを変更した際は、再度確認します。

制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。繰り返し部分が複数あるページ、iframe、アプリの共通画面では、複数の手段が必要になることがあります。実際のページで、操作全体を確認してください。

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

参考資料

コードを更新しても、使いやすさを保つために

ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。

再テストの進め方