本文へ

現在位置：E-riverstyle Design ホームの中のDevelopmentの中のJavaScriptライブラリ

Development

jQuery focusBlockSkip

概要

フォーカスしたときにブロックを表示させ、フォーカスが外れたときにブロックを非表示にするjQueryプラグインです。

WCAG 2.0の達成基準の中で 2.4.1 ブロック・スキップの達成基準の項目があります。

2.4.1 ブロック・スキップ： 複数のウェブページ上で繰り返されているコンテンツのブロックを通過できるメカニズムが利用可能である。（レベル A）

Techniques for WCAG 2.0で実装方法を確認すると下記のような記述があります。

G1: メインコンテンツエリアへ直接移動するリンクを各ページの先頭に追加する

サイトのデザインによれば、ブロック・スキップを非表示にしている場合が多いのではないかと思っているのですが、ブロック・スキップは「見えている」ことが大事のようです。

実際に、Techniques for WCAG 2.0に「リンクが画面に表示されていることが必要である。」と記述されています。

本プラグインは、デザインと達成基準の両方を満たすために開発を目的としました。

設置方法

本プラグインは、jQuery 1.4.2で動作検証をしていますので、 jQuery 1.4.2が必要です。公式サイトから入手してください。入手したら、head要素の範囲以内にjQueryを設置してください。

jQueryのダウンロードはこちらから 

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

また以下のようなAPIの指定でもかまいません。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

必要ファイルをダウンロードして、JSファイルを同じくhead要素の範囲以内に設置してください。

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

また、下記のように本jQueryプラグインを動作せるために、head要素に設置してください。

<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
追記：（2011年2月16日）

Opera11では、「Ctrl」+「矢印キー」で表示されます。

Demo

デモページ

ページがロードされたら、Tabキーを押してブロックが表示されることが確認できます。

オプション

本プラグインはoptionでCSSの変更ができます。変更できるCSSのプロパティは下記表となっています。

option
プロパティ 意味 値
width ブロックの変更 数値
height ブロックの高さ変更 数値
background ブロックの背景色を変更 カラーコード
color ブロックの文字色を変更 カラーコード
text-align ブロックの文字の配置指定 left、center（デフォルト）、right
display 表示 inline、block（デフォルト）

オプション適用例

背景色と文字色を変更したい場合は下記のように指定してください。

<script type="text/javascript">
$(function(){
    $("#blockskip").focusBlockSkip({
            'background' : '#FADB5C',
            'color' : '#909109',
        });
});
</script>

Download

focusblockskip_ver_1.zip