WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

達成方法に関する重要な情報

これらの達成方法 (参考) の使用法及び、それらが WCAG 2.0 達成基準 (規定) とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用 (対象)

リンクを実装できる全てのウェブコンテンツ技術

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、ブロックの終わりまで飛び越えることで、構成要素のブロックを回避するメカニズムを提供することである。ブロックの最初のリンク又はブロックの直前にあるリンクによって、フォーカスをそのブロックの直後にあるコンテンツに遷移させる。リンクを選択することでキーボードフォーカスはブロックを飛ばして進んでいく。複数のブロックを飛び越える場合は、利用者はこれらのリンクを使ってブロックを一つずつスキップしていく。

事例

事例 1: ナビゲーションリンクをスキップする

ある組織のウェブサイトのページには、サイトの主なセクション、サイトマップ、組織についての情報、及び組織との連絡方法へのリンクを含むナビゲーションバー又はメインメニューがある。このエリアの最初のリンクは「ナビゲーションリンクをスキップする」で、利用者はそのリンクを選択してこれらのリンクをスキップする。

事例 2: 本の索引

本の中に何ページかのセットになって区分されている索引がある。索引のそれぞれのページの冒頭にあるコンテンツの中には、アルファベットのそれぞれの文字に対するリンクがあり、その文字で始まる記載内容の索引にリンクしている。そのセットの中の最初のリンクは「リンクをスキップして索引へ」である。利用者は、このリンクを選択して他のリンクをスキップする。

事例 3: 複数のリンクの集合

ウェブサイト内の全てのページにはサイトマップ、組織に関する情報、及び組織との連絡方法へのリンクが含まれているセクションがある。サイトにある各セクションの全てのページには、同様にその下位の区分へのリンクの集合がある。1 番目のブロックの最初のリンクは「ナビゲーションリンクをスキップ」で、最初のリンクの集合をスキップする。2 番目のブロックの最初のリンクは「セクションのリンクをスキップ」で、そのサブセクションのリンクをスキップする。

事例 4: ナビゲーションリンクのブロックが複数ある HTML ページ

この事例では、各セクションの先頭に見出し要素を使用する方法 (H69) と、各セクションの最後にスキップするリンクを使用する両方を示している。これにより、ユーザエージェントの能力に応じて、キーボードナビゲーション又は見出しナビゲーションを用いて、繰り返されるコンテンツのブロックをスキップすることができる。コンテンツのいくつかのセクションは、Internet Explorer の制限を回避するために div 要素で包まれていることに注意すること (コンテンツのブロックをスキップするための HTML リンクを作成するユーザエージェントノートを参照 (リンク追加予定))。

コード例:


              <p><a href="#content">Content title</a></p>
                <h2>Main Navigation</h2>
                <ul>
                <li><a href="#subnav">Sub Navigation</a></li>
                <li><a href="/a/">Link A</a></li>
                <li><a href="/b/">Link B</a></li>
                <li><a href="/c/">Link C</a></li>
                ...
                <li><a href="/j/">Link J</a></li>
                </ul>
                <div class="iekbfix">
                <h2 id="subnav">Sub Navigation</h2>
                <ul>
                <li><a href="#ultranav">Ultra Sub Navigation</a></li>
                <li><a href="/suba/">Sub A</a></li>
                <li><a href="/subb/">Sub B</a></li>
                <li><a href="/subc/">Sub C</a></li>
                ...
                <li><a href="/subj/">Sub J</a></li>
                </ul>
                </div>
                <div class="iekbfix">
                <h2 id="ultranav">Ultra Sub Navigation</h2>
                <ul>
                <li><a href="#content">Content title</a></li>
                <li><a href="/ultraa/">Ultra A</a></li>
                <li><a href="/ultrab/">Ultra B</a></li>
                <li><a href="/ultrac/">Ultra C</a></li>
                ...
                <li><a href="/ultraj/">Ultra J</a></li>
                </ul>
                </div>
                <div>
                <h2 id="content">Content title</h2>
                <p>Now that I have your attention...</p>
                </div>
            

CSS:

コード例:


              div.iekbfix {
                width: 100%;
                }
            

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

手順

  1. リンクが、繰り返されるコンテンツのブロックの前にある最後のフォーカス可能なコントロールである、又はブロック内の最初のリンクである。

  2. リンクテキストがブロックをスキップすることを伝えている。

  3. リンクは常に表示されている、又はキーボードフォーカスを受け取ったときに表示される。

  4. リンクを選択すると、そのブロックの直後のコンテンツにフォーカスが移動する。

期待される結果

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。