フォーカスした時に、ブロックスキップを表示させ、フォーカスが外れたらブロックスキップを非表示にさせるjQueryプラグイン「focusBlockSkip」を開発しました。

以前のエントリー富士通のサイトのようなブロック・スキップを時には表示させ、時には非表示にする実装[js]で、富士通のサイトで実装しているブロックスキップについて書かせていただきましたが、その関連としまして、フォーカスした時に、ブロックスキップを表示させ、フォーカスが外れたらブロックスキップを非表示にさせるjQueryプラグイン「focusBlockSkip」を開発しました。

前回のエントリーでもjQueryで簡単に実装できると書かせていただきましたが、その場合だとjQuery以外にも、CSSの記述が必要です。

jQueryだけ記述すれば実装できたらもっと手軽に実装できるのではないかと思い、今回、jQueryプラグインとして開発を行いました。

設置方法

以下のようにブロックスキップを指定している場合

<div id="blockskip">
<a href="#contents">このページの本文へ移動</a>

</div>

必要ファイルを下記よりダウンロードして、head要素に以下のように設置してください。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="focusblockskip.js"></script>

本プラグインの実装は下記のように記述してください。

<script type="text/javascript">

$(function(){
    $("#blockskip").focusBlockSkip();
});
</script>

動作確認

  • Firefox 3.6.10
  • Google Chrome 6.0.472.63
  • Safari 5.0.2
  • Opera 10.61
  • Internet Explorer 8

デモページ

デモページやoption、ファイルのダウンロードなどは下記のページよりご確認ください。

jQueryプラグイン focusBlockSkip | E-riverstyle Design
http://www.e-riverstyle.com/dev/js/focusblockskip.html

なお、本プラグインはjQuery1.4.2で開発を行っていますので、1.4.3ではまだ未検証です。jQuery1.4.4で動作することを確認取りました。

また、なぜこのようなブロックスキップが必要なのかは、 Techniques for WCAG 2.0のG1を読むと理解も深まるかと思いますので、合わせてお読みください。