このページの本文へ移動

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

出典:WAIC. “ G123: 繰り返しているコンテンツのブロックの先頭に、そのブロックの末尾へのリンクを追加する新しいウィンドウを開きます ” WCAG 2.0 達成方法集(参照2024年7月1日)

概要

ユーザーが繰り返し表示されるコンテンツブロックをスキップして、そのブロックの末尾に直接移動できるようにするための方法です。特に、長いナビゲーションメニューや広告ブロックなどが繰り返される場合に有効です。このリンクを追加することで、ユーザーは効率的に主要なコンテンツにアクセスできるようになります。

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

適用(対象)

こちらは、次の達成基準に関連する達成方法です。

使用例

G123の手法は、以下のようなシチュエーションで有効です。

長いナビゲーションメニュー

大規模なウェブサイトやオンラインストアでナビゲーションメニューが複数階層にわたる場合、ユーザーはメニューをスキップして主要なコンテンツに直接アクセスしたいと考えることが多いです。例えば、大学のウェブサイトにアクセスしたとき、ユーザーがすぐに学部の情報を見たい場合、長いナビゲーションメニューをスキップするリンクを追加します。

本の索引

索引が非常に長い場合、ユーザーが特定の章やセクションに直接アクセスできるようにするためにスキップリンクを提供します。例えば、本の索引ページで、ユーザーが興味のある章に迅速に移動できるように索引をスキップするリンクを追加します。

リンク集やリソース集

リンク集やリソース集のページで、ユーザーが特定のリンク集をスキップして次のセクションに移動したい場合に有効です。例えば、研究論文やリソースへのリンクが大量にあるページで、ユーザーが特定のカテゴリのリンクをスキップして次のカテゴリに移動できるようにリンクを提供します。

複数のナビゲーションセクション

サイドバーとフッターの両方にナビゲーションリンクが含まれているページでは、ユーザーがサイドバーのナビゲーションをスキップして、直接フッターのナビゲーションに移動できるようにします。例えば、ページのサイドバーのナビゲーションをスキップするリンクを追加し、ユーザーがフッターのナビゲーションに直接移動できるようにします。

まとめ

スキップリンクの実装は、ウェブアクセシビリティの基本的な手法の一つであり、ユーザーエクスペリエンスの向上に寄与します。シンプルな実装ですが、視覚障害者やスクリーンリーダー使用者にとって大きな効果があります。常にユーザーの視点に立って、アクセシビリティを考慮したデザインを心がけましょう。

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お問い合わせ

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

お問い合わせ