WCAG 2.0 実装方法集

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

-

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

適用(対象)

クライアントサイド・スクリプティングを提供するウェブコンテンツ技術

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

解説

この実装方法は、繰り返される構成要素を利用者のコントロールの下でメニューを展開したり折りたたんだりできるメニューの中に置くことで、その構成要素をスキップできるようにする。利用者は、メニューを折りたたむことで繰り返される構成要素をスキップできる。利用者は、メニューの要素を隠したり削除したりするユーザーインターフェースを呼び出すことができる。関連情報には、ナビゲーションをスキップするメカニズムを提供するために利用できるメニュー、ツールバー及びツリーの実装方法をいくつか挙げている。

注記: 類似の方法は、サーバーサイドスクリプティングを用いて修正後のウェブページを読み込むことでも実装できる。

事例

事例 1

ウェブページの先頭にあるナビゲーションリンクは、すべてHTML、CSS及びJavaScriptを用いて実装されているメニュー項目である。ナビゲーションバーが展開しているとき、ナビゲーションのリンクは利用可能になっている。ナビゲーションバーがたたまれているとき、リンクは利用不可能である。

コード例:


...

  <script type="text/javascript">
  function toggle(id){
    var n = document.getElementById(id);
    n.style.display =  (n.style.display != 'none' ? 'none' : '' );
  }
  </script>

...

  <a href="#" onclick="toggle("navbar")">ナビゲーションバー切り替え</a>

  <ul> id="navbar">
  <li><a href="http://target1.html">リンク 1</a></li>
  <li><a href="http://target2.html">リンク 2</a></li>
  <li><a href="http://target3.html">リンク 3</a></li>
  <li><a href="http://target4.html">リンク 4</a></li>
  </ul>

...

このコードの実装サンプル:ナビゲーションバーをリンクで切り替える

事例 2

一連のウェブページのための目次はそれぞれのページの先頭近くで繰り返される。目次の先頭にあるボタンで、利用者はそれを消したり復元したりできる。

コード例:


...

   <script type="text/javascript">
  function toggle(id){
    var n = document.getElementById(id);
    n.style.display =  (n.style.display != 'none' ? 'none' : '' );
  }
  </script>

  ...

  <button onclick="return toggle('toc');">目次切り替え</button>
  <div id="toc">
    ...
  </div>

...

このコードの実装サンプル:目次をボタンで切り替える

参考リソース

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

検証

チェックポイント

  1. ユーザーインタフェースコントロールで、繰り返されるコンテンツを展開したり折りたたんだりできるかをチェックする。

  2. コンテンツが展開されたとき、それがプログラムで解釈可能なコンテンツに含まれていて、論理的な場所で読み上げ順序があるかをチェックする。

  3. コンテンツが折りたたまれているとき、それがプログラムで解釈可能でない部分にあることをチェックする。

判定基準

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

日本語訳における注記:

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