適用 (対象)
クライアントサイドスクリプティングを提供するウェブコンテンツ技術
これは達成基準 2.4.1: ブロックスキップに関する達成方法である。(書かれていない達成方法を満たす慣習的な達成方法)
解説
この達成方法は、繰り返される構成要素を利用者のコントロールの下でメニューを展開したり折りたたんだりできるメニューの中に置くことで、その構成要素をスキップできるようにする。利用者は、メニューを折りたたむことで繰り返される構成要素をスキップできる。利用者は、メニューの要素を隠したり削除したりするユーザインタフェースを呼び出すことができる。関連情報には、ナビゲーションをスキップするメカニズムを提供するために利用できるメニュー、ツールバー及びツリーの達成方法をいくつか挙げている。
類似の方法は、サーバーサイドスクリプティングを用いて修正後のウェブページを読み込むことでも実装できる。
事例
事例 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')">Toggle Navigation Bar</a>
<ul id="navbar">
<li><a href="http://target1.html">Link 1</a></li>
<li><a href="http://target2.html">Link 2</a></li>
<li><a href="http://target3.html">Link 3</a></li>
<li><a href="http://target4.html">Link 4</a></li>
</ul>
...
このコードの実装サンプル: ナビゲーションバーをリンクで切り替える.
2014 年 6 月版のアクセシビリティ・サポーテッド（AS）情報: SCR28-1 では、「要注意」と評価されている。WAIC はウェブ制作者にこの達成方法が一部の環境では動作しないことに注意を促すものである。
事例 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');">Toggle Table of Contents</button>
<div id="toc">
...
</div>
...
このコードの実装サンプル: 目次をボタンで切り替える
2014 年 6 月版のアクセシビリティ・サポーテッド（AS）情報: SCR28-2 では、「要注意」と評価されている。WAIC はウェブ制作者にこの達成方法が一部の環境では動作しないことに注意を促すものである。
参考リソース
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
検証
手順
- ユーザインタフェースコントロールで、繰り返されるコンテンツを展開したり折りたたんだりできることを確認する。
- コンテンツが展開されたとき、それが読み上げ順序の論理的な場所でプログラムによる解釈が可能なコンテンツに含まれていることを確認する。
- コンテンツが折りたたまれているとき、それがプログラムによる解釈が可能でない部分にあることを確認する。
期待される結果
- 上記の全ての項目の結果が真である。