Bypass Blocks

アクセシビリティの Aレベルである Bypass Blocks についてご存じでしょうか？

WAIC（ウェブアクセシビリティ基盤委員会）が運営しているサイトで以下のように記述があります。

達成基準 2.4.1 ブロックスキップ (レベル A): 複数のウェブページ上で繰り返されているコンテンツのブロックをスキップするメカニズムが利用できる。

要は、スキップリンクを活用することでなんらかの障害を持つユーザーがウェブページのメインコンテンツに素早く辿り着ける、ということ。

例えば、
ページの中央にメインの記事があり、周囲を広告、検索、ナビゲーションなどが多用されたサイドメニューに囲まれていると、ページが切り替わるたびに毎回Tabキーでそれらのコンテンツを先に処理する必要があって手間である。
また、画面を拡大しているユーザーにとって、メインコンテンツを見つけ出すのが難しい。

そういった時にスキップリンクがあると、素早くメインのコンテンツにたどり着けるので便利だということ。

スキップリンクによるユーザビリティの向上

メインコンテンツへのスキップリンクを追加することは、ユーザー体験をよくする方法の一つとして知られています。

簡単な例をAIに作らせてみた

Tabで「メインコンテンツへスキップ」を選択するとナビゲーションを無視して、メインコンテンツへカーソルが移動します。

リンクは通常ページの上部に配置され、初のフォーカス可能な要素である
スキップリンクのターゲットは、インタラクティブな要素である(リンク、ボタン、またはtabindex属性が割り当てられている）

上記の例では <main id="main-content" tabindex="-1"> とすることで、スキップリンクから辿った場合はフォーカス可能ですが、タブで順番にフォーカスを移動しても、この要素にフォーカスが当たるのを防ぐことができます。

<a href="#main-content" class="skip-link">メインコンテンツにスキップ</a>

// 略

<main id="main-content" tabindex="-1">

実装方法はWebAIM（Web Accessibility In Mind）のスキップリンク解説なども参考になります

ランドマーク(role='main')や見出しでは不十分か

When Is a Skip Link Needed? によると、

To clarify, SC 2.4.1 does not strictly require a skip navigation link in all cases. If a page includes a sectioning element (or ARIA role="main" landmark) that wraps the main content, or a semantic heading at the top of the main content area, it will technically meet the requirements of this Success Criterion, even if a skip link is not present.

とあり、技術的には、WAI-ARIAランドマーク（role='main'の指定）や見出し構造（<main>セクションの使用）を適切に実装することで、SC2.4.1の達成基準を満たすことは可能であるようです。

ただし、SC2.4.1の意図を完全に満たすわけではなく、ユーザビリティの観点からは、スキップリンクと組み合わせることが推奨されます。

というのもランドマーク検索の存在を知っている必要があったり、キーボードのみを使用する視覚ユーザーはランドマークに直接アクセスする機能を使えない場合があるからです。

※ そもそもランドマークとは？となる場合、ウェブアクセシビリティの基本：ランドマークロールを理解するがわかりやすかったです。

スキップリンクは全てのページで実装すべきなのか

ほとんどのウェブブラウザは、利用者がフォーカスをページの先頭に移動するためのキーボードショートカットを提供しているので、ナビゲーションリンク一式をウェブページの下部で提供している場合は、「スキップ」リンクの提供は不要かもしれない

とある通り、Webサイト・ページの構造によって採用を考えた方が良さそうです。

まとめ

最低限のWCAG要件を技術的に満たすため、ページに適切なランドマークや見出しを含めたい。

多くのユーザーにとってアクセシビリティとユーザー体験を向上させる方法の一つとして、キーボードでアクセス可能なスキップリンクを追加することを検討したい。

最後に

ここまで見ていただきありがとうございます。

最近知ったスキップリンクについて、思考の整理として記事にしてみました。
スキップリンクはユーザーにとって便利な機能ではありますが、本機能と比べて優先度が落ちると思うので、a nice-to-have として余力があれば着手したいと思いました。

参考