このページの本文へ移動

Bypass Blocks2.4.1 ブロックスキップ(レベルA)

複数のウェブページ上で繰り返されているコンテンツのブロックをスキップするメカニズムが利用できる。

出典:WAIC. “ 達成基準 2.4.1 を理解する新しいウィンドウを開きます ” WCAG 2.0 解説書(参照2024年6月1日)

概要

ユーザーがページ内の特定のエリアに迅速に移動できるようにすることを求めています。これにより、繰り返しコンテンツや大規模なコンテンツを持つウェブページでのナビゲーションが容易になります。特にスクリーンリーダーを使用するユーザーやキーボードナビゲーションを必要とするユーザーにとって重要です。

このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。

課題に対する実践的な方法

次の達成方法の中から一つを用いて、繰り返されるブロックをスキップするリンクを作成する

メインコンテンツエリアへのスキップリンク(G1)

ページの先頭にスキップリンクを追加し、ユーザーがメインコンテンツエリアに直接移動できるようにします。

G1:メインコンテンツエリアへ直接移動するリンクを各ページの先頭に追加する

繰り返しブロックの末尾へのリンク(G123)

繰り返し表示されるコンテンツブロックの先頭にリンクを配置し、そのブロックをスキップして末尾に移動できるようにします。

G123: 繰り返しているコンテンツのブロックの先頭に、そのブロックの末尾へのリンクを追加する

ページエリアへのスキップリンク(G124)

ページの各エリア(メインコンテンツ、サイドバー、フッター)へのリンクをページの先頭に追加し、ユーザーが特定のエリアに迅速に移動できるようにします。

G124:ページの先頭に、コンテンツの各エリアへのリンクを追加する

次の達成方法の中から一つを用いて、スキップ可能な方法で繰り返されるブロックをグループ化する

ページの領域を識別するランドマークの使用(ARIA11)

ARIAランドマークを用いることで、ページ内のナビゲーションやメインコンテンツ、サイドバー、フッターなどの領域を明確にし、スクリーンリーダーを利用するユーザーが特定のセクションへ迅速に移動できるようにします。

ARIA11:ページのリージョンを特定するためにARIAランドマークを使用する

セクションの開始位置に見出し要素を提供(H69)

各コンテンツセクションの開始位置に見出し要素を追加し、スクリーンリーダーがセクションの始まりを認識しやすくします。

H69:コンテンツの各セクションの開始位置に見出し要素を提供する

frame要素(H70)とtitle属性(H64)の使用

繰り返されるコンテンツのブロックをframe要素でグループ化し、それぞれにtitle属性を設定して、ユーザーが各フレームの内容を理解しやすくします。

H70:繰り返されているコンテンツのブロックをグループ化するために、frame 要素を使用する H64:frame要素及びiframe要素のtitle属性を使用する(HTML)

展開可能/折り畳み可能なメニューの使用(SCR28)

コンテンツのブロックをバイパスするために、展開可能および折り畳み可能なメニューを使用し、ユーザーが必要に応じてメニューを展開したり折り畳んだりできるようにします。

SCR28:コンテンツのブロックをバイパスするために、展開可能及び折り畳み可能なメニューを使用する

まとめ

達成基準 2.4.1 は、ユーザーがページ内で目的のコンテンツに迅速にアクセスできるようにするための重要なガイドラインです。これを達成するための実践的方法として、リンクやランドマークの追加、適切な見出しの使用、コンテンツのグループ化、およびインタラクティブなメニューの提供が挙げられます。これらの対応策を実装することで、すべてのユーザーがより効率的にウェブサイトを利用できるようになります。

WCAG 2.0とその翻訳文書の利用について

本ページの内容は、「Web Content Accessibility Guidelines (WCAG) 2.0新しいウィンドウを開きます」、「WCAG 2.0 解説書新しいウィンドウを開きます」および「WCAG 2.0 達成方法集新しいウィンドウを開きます」からの引用を含んでいます。引用された内容は、W3CおよびWAICによって公開されており、以下のクリエイティブ・コモンズライセンスに基づいて使用されています。これらのガイドラインを参考にしつつ、ウェブアクセシビリティの向上に向けた具体的な取り組みを分かりやすく説明しています。

WCAG 2.0

この作品はクリエイティブ・コモンズ 表示 4.0 国際ライセンス新しいウィンドウを開きますの下に提供されています。

WCAG 2.0 解説書及び達成方法集

この作品はWCAG 2.0 解説書及び達成方法集からの引用を含みます。翻訳はWAICによって提供されており、文書のステータスは「勧告」です。なお、この文書の正式版はあくまでW3Cのサイト内にある英語版であることにご注意ください。

Contactお問い合わせ

当社ではウェブアクセシビリティ診断を提供しております。すべてのユーザーにアクセスできるウェブサイトを目指して、一緒に取り組みましょう。診断のご依頼や詳細については、お気軽にご連絡ください。

お問い合わせ