WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

G123: 繰り返しているコンテンツのブロックの開始位置に、そのブロックの終了位置へのリンクを追加する

適用(対象)

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

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

解説

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

事例

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

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

事例 2:本の索引

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

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

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

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

この事例では、各セクションの冒頭の見出し要素(実装方法 H69)、及びそれぞれのセクションの最後までスキップするリンクの両方が用いられている。利用するユーザーエージェントの能力に依存するが、これによってキーボード・ナビゲーション又は見出しナビゲーションを用いて、繰り返されるコンテンツのブロックをスキップすることができる。

<p><a href="#content">Content title</a></p>
    <h2>メイン・ナビゲーション</h2>
    <ul>
      <li><a href="#subnav">サブ・ナビゲーション</a></li>
      <li><a href="/a/">リンク A</a></li>
      <li><a href="/b/">リンク B</a></li>
      <li><a href="/c/">リンク C</a></li>
...
      <li><a href="/j/">リンク J</a></li>
    </ul>
    <div class="iekbfix">
      <h2 id="subnav">サブ・ナビゲーション</h2>
      <ul>
        <li><a href="#ultranav">ウルトラ・サブ・ナビゲーション</a></li>
        <li><a href="/suba/">サブ A</a></li>
        <li><a href="/subb/">サブ B</a></li>
        <li><a href="/subc/">サブ C</a></li>
...
        <li><a href="/subj/">サブ J</a></li>
      </ul>
    </div>
    <div class="iekbfix">
      <h2 id="ultranav">ウルトラ・サブ・ナビゲーション</h2>
      <ul>
        <li><a href="#content">Content title</a></li>
        <li><a href="/ultraa/">ウルトラ A</a></li>
        <li><a href="/ultrab/">ウルトラ B</a></li>
        <li><a href="/ultrac/">ウルトラ C</a></li>
...
        <li><a href="/ultraj/">ウルトラ J</a></li>
      </ul>
    </div>
    <div>
      <h2 id="content">コンテンツのタイトル</h2>
      <p>さて、ちょっと聞いてください。...</p>
    </div>

CSS:

div.iekbfix {
  width: 100%;
} 
  

参考リソース

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

検証

チェックポイント

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

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

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

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

判定基準

注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。