Skip to content

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

このテクニックについて

このテクニックは 2.4.1: ブロックのバイパス (スキップ可能な方法で、繰り返される構成要素のブロックをグルーピングするために用いる場合、十分なテクニック) に関連する。

このテクニックは、クライアントサイドスクリプティングを提供するウェブコンテンツ技術に適用される。

解説

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

注記

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

事例

事例 1: 目次を切り替える

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

...
<script>
let tocToggle = document.querySelector(".toc-toggle");
let toc = document.querySelector("#toc");
tocToggle.addEventListener("click", toggle, false);

function toggle(e){
  let elm = e.currentTarget;
  if(elm.getAttribute("aria-expanded") === "false"){
    elm.setAttribute("aria-expanded", "true");
  }
  else{
    elm.setAttribute("aria-expanded", "false");
  }
}
</script>

...

<button aria-controls="toc" aria-expanded="true" class="toc-toggle" type="button">
  Toggle Table Of Contents
</button>
<nav aria-labelledby="toc-header" id="toc">
  <h2 id="toc-header">Table of Contents</h2>
  <ul>
    <li><a href="#sec1">Section 1</a></li>
    <li><a href="#sec2">Section 2</a></li>
    <li><a href="#sec3">Section 3</a></li>
    <li><a href="#sec4">Section 4</a></li>
  </ul>
</nav>
...

このコードの動作例: Toggle table of contents with a button

関連リソース

推奨を意味するものではない。

検証

手順

  1. ユーザインタフェースコントロールで、繰り返されるコンテンツを展開したり折り畳んだりできることをチェックする。
  2. コンテンツが展開されたとき、それが読み上げ順序の論理的な場所でプログラムによる解釈が可能なコンテンツに含まれていることをチェックする。
  3. コンテンツが折り畳まれているとき、それがプログラムによる解釈が可能でない部分にあることをチェックする。

期待される結果

  • 上記の全てのチェックが真である。

テストルール

次は、この達成基準の特定の側面に関するテストルールである。この特定のルールを使用して WCAG に適合しているかどうかを確認する必要はないが、これらのルールは定義され、承認されたテスト方法である。テストルールの使用については、WCAG 達成基準のテストルールを理解する を参照。

Back to Top