実際に機能するスキップリンクを作る

機能するスキップリンクには2つの要素があります。どこかへリンクするアンカーと、実際に移動先となるターゲットです。どちらも必要です。

アンカーは通常のリンクで、hrefにはフラグメントを指定します。たとえば、ハッシュ記号に id を続けた形式です。クリックすると、ブラウザーに移動先を伝えられます。

ターゲットは、移動したい要素です。idを付けて、href のフラグメントが指し示せるようにします。

スキップリンクはmainランドマークを指すようにしてください。ページ固有のコンテンツをまとめる唯一の領域であり、ユーザーが移動したい場所そのものです。

以前からある落とし穴があります。リンクによってページはスクロールしますが、フォーカスはリンクに残ります。次に Tab を押すと、ユーザーはナビゲーションに戻されてしまいます。

解決策は、フォーカスが実際にそこへ移動できるようにすることです。tabindex をマイナス1にすることで、スキップリンクからターゲットにフォーカスを移せます。

マイナス1は、スクリプトから操作でき、リンクの移動先にできるが、Tab 順序には含めないことを意味します。他のユーザーにとって余計な Tab 停止位置にはなりません。

現在、ほとんどのブラウザーはフラグメントのターゲットへ自動的にフォーカスを移動します。それでも、どの環境でも確実に動作させるにはtabindex をマイナス1にする設定を追加してください。

ページを再読み込みし、Tabを1回押してから Enter を押します。フォーカスインジケーターがコンテンツへ移動し、次の Tab でコンテンツ内へ進めることを確認してください。✅

わかりやすいラベルを付けてください。Skip to main contentなら何が起きるのかを正確に伝えられます。「Skip」のような曖昧な表現やアイコンだけよりも適切です。

アンカーはbody の最初の子要素として、ヘッダーより前に配置してください。そうすれば、ページ上の他の要素より先に Tab で到達できます。

アンカーを main の一致するidに関連付け、tabindex をマイナス1に設定し、Tab 操作でテストします。これで本当に機能するスキップリンクになります。🎯