Webアクセシビリティ達成基準「2.4.1 ブロックスキップの達成基準」の話

前回はWebアクセシビリティ達成基準「2.3.1 3回のせん（閃）光、又はしきい（閾）値以下の達成基準」について解説しました。続けて今回は「2.4.1 ブロックスキップの達成基準」への対応について解説します。

Webサイトには、ヘッダーやグローバルナビゲーション、サイドメニューなど、多くのページで共通して表示される要素があります。これらはサイトを利用するうえで重要な役割を果たしますが、一方でキーボード操作やスクリーンリーダーを利用する方にとっては、ページを移動するたびに同じ内容を何度も読み上げたり通過したりする必要があり、大きな負担になる場合があります。

その負担を軽減するために定められているのが、Webアクセシビリティ達成基準「2.4.1 ブロックスキップ」です。

2.4.1 ブロックスキップの達成基準とは

達成基準の概要

達成基準2.4.1では、複数のWebページで繰り返し表示されるコンテンツのまとまりを飛ばし、利用者が必要な情報へ直接アクセスできる仕組みを提供することが求められています。

例えば、次のような要素が対象になります。

• ヘッダー
• グローバルナビゲーション
• サイドメニュー
• パンくずリスト
• バナーエリア
• フッター前の共通案内

これらを毎回順番に移動しなければならない状態では、キーボード利用者やスクリーンリーダー利用者の操作効率が大きく低下します。

そのため、本文へ直接移動できる機能などを提供し、繰り返し表示されるブロックを容易に飛ばせるようにする必要があります。

なぜブロックスキップが必要なのか

マウスを使用できる利用者であれば、見たい箇所をクリックするだけで移動できます。

しかし、キーボードのみで操作している場合は、Tabキーを使って順番に移動する必要があります。

例えば、グローバルナビゲーションに20個のリンクが設置されているサイトの場合、毎ページ20回以上Tabキーを押してから本文へ到達しなければならないケースもあります。

スクリーンリーダー利用者の場合も同様で、ページを開くたびに同じナビゲーションを読み上げられるため、目的の情報へたどり着くまでに時間がかかってしまいます。

ブロックスキップは、こうした利用者の負担を軽減し、サイト全体の使いやすさを向上させるための重要な仕組みです。

ブロックスキップの代表的な実装方法

スキップリンクを設置する

最も一般的な方法が「スキップリンク」です。

ページの先頭に設置し、キーボード操作でフォーカスした際に表示されるようにします。

リンク例は以下のようなものです。

• 本文へ移動
• メインコンテンツへ移動
• コンテンツをスキップ

利用者がこのリンクを選択すると、本文エリアへ直接移動できます。

行政機関や自治体サイトでも広く採用されている実装方法です。

HTMLのランドマークを適切に使用する

HTML5では、ページ構造を明確に示すランドマーク要素が用意されています。

主な要素は以下のとおりです。

• header
• nav
• main
• aside
• footer

スクリーンリーダーはこれらのランドマークを認識できるため、利用者が目的の領域へ素早く移動できるようになります。

近年ではスキップリンクとランドマークを組み合わせて実装するケースが一般的です。

見た目だけでなく操作性も確認する

スキップリンクを設置しただけでは十分とはいえません。

実際にキーボード操作で確認し、

• Tabキーで到達できるか
• フォーカス時に表示されるか
• 正しい位置へ移動するか
• 移動後に操作を継続できるか

といった点を検証することが重要です。

実装ミスにより、リンクは存在するものの正しく機能していないケースも少なくありません。

よくある問題点

スキップリンクが表示されない

CSSの設定によって完全に非表示になってしまい、キーボード利用者が存在に気付けないケースがあります。

フォーカス時には視認できる状態にすることが重要です。

移動先の指定が適切でない

リンク先のID設定が誤っている場合、クリックしても移動できません。

また、本文以外の位置へ移動してしまうケースもあります。

実装後は必ず動作確認を行いましょう。

JavaScript依存の実装になっている

特殊なJavaScript処理に依存すると、環境によって正常に動作しない可能性があります。

基本的にはHTMLのアンカーリンクによるシンプルな実装が推奨されます。

制作現場で意識したいポイント

設計段階からアクセシビリティを考慮する

ブロックスキップへの対応は、公開直前に追加するよりも、サイト設計段階から考慮した方が効率的です。

特に大規模サイトや多階層サイトでは、ページ共通要素が増えるため、ブロックスキップの重要性が高まります。

ワイヤーフレームやデザイン設計の段階からアクセシビリティ要件を整理しておくことで、後工程の修正コストを抑えることができます。

WCAGやJIS X 8341-3への対応にもつながる

ブロックスキップは、国際標準であるWCAGや、日本国内で広く参照されるJIS X 8341-3の達成基準にも含まれています。

行政機関や公共性の高いサイトでは特に重要な項目の一つです。

近年は民間企業でもアクセシビリティ対応が求められる場面が増えており、企業サイトや採用サイト、サービスサイトにおいても対応の重要性が高まっています。

まとめ

Webアクセシビリティ達成基準「2.4.1 ブロックスキップ」は、利用者が繰り返し表示されるコンテンツを飛ばし、目的の情報へ効率よくアクセスするための重要な基準です。

特にキーボード利用者やスクリーンリーダー利用者にとっては、サイトの使いやすさを大きく左右する要素となります。

実装自体は比較的シンプルですが、正しく動作するかどうかの確認が欠かせません。

当社では、Webアクセシビリティ診断やアクセシビリティを考慮したWebサイト制作にも対応しています。行政機関や企業サイトのアクセシビリティ向上をご検討の際は、お気軽にご相談ください。