大きなページ向けの複数のバイパスリンク

小さなページなら、スキップリンクは1つで十分です。しかし複雑なレイアウトには複数の繰り返し領域があり、ユーザーは main 以外の場所にも移動したいことがあります。

ユーザーが移動したいのは、記事とは限りません。検索ボックス、主要ナビゲーション、フッターの場合もあります。実際に利用したい移動先を用意してください。

よくある組み合わせは、Skip to content、Skip to navigation、Skip to searchです。リスト自体が負担にならないよう、短くまとめてください。

バイパスリンクは小さなnav領域で囲み、ページ上部にある1つのまとまったショートカット群として読み上げられるようにしてください。

ラッパーに、Skip links のようなaria-labelを付けてください。名前がないと、同じページにある2つの nav がスクリーンリーダーユーザーには同じものとして聞こえてしまいます。

すべてのショートカットには、移動先となる実際のidが必要です。Skip to search は検索領域を、Skip to nav はメニューを指すようにします。

先ほどと同じように、各ターゲットにtabindex をマイナス1にする設定を追加します。対応するリンクを実行したとき、フォーカスが確実に移動するようにするためです。

あらゆるものにショートカットを追加するのは避けてください。バイパスリンクが多すぎると、それ自体が Tab で通過しなければならない繰り返しコンテンツのブロックになります。

適切なランドマークがあれば、スクリーンリーダーユーザーはすでに領域から領域へ移動できます。追加のスキップリンクは主に、目の見えるキーボードユーザーのためのものです。

ショートカットはわかりやすい順序に並べてください。通常は、多くの人が最初に訪れるコンテンツを先にします。利用頻度の低いものは最後に置きます。

ショートカット群を Tab で移動し、それぞれを実行してください。毎回、フォーカスが1つずれることなく正しい領域に移動することを確認します。✅

大きなページでは、ラベル付きの nav にいくつかのバイパスリンクをまとめ、それぞれにフォーカス可能なターゲットを用意します。数は少なくし、コンテンツを先に配置してください。🎯