Accessible Tabs

名称
Accessible Tabs 1.5
配布元
jQuery Accessible Tabs - How to make tabs REALLY accessible
特徴
javascriptオフ、スクリーンリーダーへの対応に重点を置いたjQueryのタブナビゲーション・プラグイン。
HTML文書にタブ追加し、追加したタブをクリックしたときに対応するコンテンツを表示します。
よくあるjavascriptのタブナビゲーションでは、タブとしてリンク先を「'#'」にしたA要素を追加し、タブコンテンツの表示・非表示はCSSの「display」を「block → none」と入れ替えることでタブ表示を実現しています。しかしスクリーンリーダーで読み上げた場合は、タブのリンク先「"#"」が特定できないので、読み上げるフォーカスをどこに移動するのかわからなくなります。また、タブコンテンツの表示・非表示をCSSの「display」で切り換えると、スクリーンリーダーのバッファにタイムラグがあり、これも移動先が分からなくなる原因になるそうです。
Accessible Tabsはこれらの問題点を考慮して作成しているので、スクリーンリーダでも問題なくブラウジングできるとのことです。
ライセンス
GPL and MIT License

サンプルはこちらを御覧ください。

設置方法

  1. 配布元サイトの「Download Source」からzipファイルをダウンロードして解凍します。
    基本的には解凍したフォルダの中から「js/jquery.tabs.js」、「css/screen/tabs.css」だけを使用します。
  2. 解凍したファイルには未圧縮の「jquery-1.4.2.js」も含まれていますが、jQueryのサイトにはファイルサイズの小さな圧縮版が公開されています。ファイルサイズ縮小のため圧縮版(70.4KB)をダウンロードします。
  3. 上記の3つのファイルを以下のフォルダ構成で保存します。
    [root]
     ├[js]
     │ ├ jquery-1.4.2.min.js
     │ └ jquery.tabs.js
     └[css]
       └ tabs.css
  4.  htmlファイルのhead部分に以下の文を追加します。
    <link rel="stylesheet" href="css/tabs.css" type="text/css" />
    <script type="text/javascript">document.documentElement.className += " js";</script><!-- ※1 -->
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.tabs.js"></script>
    <script type="text/javascript"><!--
    $(function(){
    $(".jquery_tabs").accessibleTabs({tabhead:'h2'});// ※2
    });
    --></script>

    ※1 javascriptが有効なときにhtml要素に「js」クラスを追加します。「tabs.css」では、すべてのセレクタの指定を「.js」で始めているので、javascriptが有効な時だけ「tabs.css」のCSSが適用されます。

    ※2 .jquery_tabsは、CSSセレクタです。タブを適用する部分全体を囲む要素を指定します。タグ名やクラス名、ID名などのCSSセレクタであれば任意に設定できます。(下記「5.」参照)
    accessibleTabsはこのプラグインの名前なので変更できません。
    {}内はオプションを指定します(下記オプション参照)。'tabhead'はタブに変換する要素を指定します。指定する要素はタグ名やクラス名、ID名などのCSSセレクタであれば任意に設定できます。(下記「5.」参照)

  5. タブを適用する部分のHTMLは以下のとおりです。
    <div class="jquery_tabs"><!-- ※1 -->
    <h2>1つめのタブ</h2><!-- ※2 -->
    <div class="tabbody"><!-- ※3 -->
    	<p>1つめのタブです。</p>
    	<p>仮テキスト仮テキスト仮テキスト仮テキスト仮テキスト</p>
    	<p>仮テキスト仮テキスト仮テキスト</p>
    </div>
    <h2>2つめのタブ</h2>
    <div class="tabbody">
    	<p>2つめのタブです。</p>
    	<p>仮テキスト仮テキスト仮テキスト仮テキスト</p>
    </div>
    <h2>3つめのタブ</h2>
    <div class="tabbody">
    	<p>3つめのタブです。</p>
    </div>
    <h2>4つめのタブ</h2>
    <div class="tabbody">
    	<p>4つめのタブです。</p>
    </div>
    </div>

    ※1class="jquery_tabs"」は、上記「4.」で指定した、タブを適用する部分全体のCSSセレクタと同じにします。

    ※2h2」は、上記「4.」で指定した、タブに変換する要素のCSSセレクタと同じにします。

    ※3 タブコンテンツとして表示する要素に「class="tabbody"」を追加します。(オプション「tabbody」参照)

  6. 以上で完了です

以下のオプションを指定するとより細かな設定が可能です。

//オプション指定例
$(".jquery_tabs").accessibleTabs({tabhead : 'h2' , fxspeed : 800});// ←赤字部分がオプション項目
wrapperClass
タブコンテンツ全体を囲むDIV要素に付けるクラス名(既定値:"content")
currentClass
選択中のタブに付けるクラス名(既定値:"current")
tabhead
タブに変換する要素のCSSセレクタ(この要素は非表示になる)(既定値:"h4")
tabheadClass
tabheadで指定した要素に付けるクラス名(既定値:"tabhead")
tabbody
タブコンテンツとして表示・非表示する要素のCSSセレクタ(既定値:".tabbody")
fx
タブを切替え時の視覚効果(既定値:"show" // "fadeIn", "slideDown", "show")
fxspeed
タブを切替え時の視覚効果の時間(既定値:'normal' // ミリ秒または、"slow", "normal", "fast")
currentInfoText
選択中のタブを示すテキスト(スクリーンリーダで読み上げられる)(既定値:"current tab: ")
currentInfoPosition
選択中のタブを示すテキストを追加する場所。前か後か(既定値:"prepend" // "prepend" or "append")
currentInfoClass
選択中のタブを示すテキストに付けるクラス名(既定値:"current-info")
tabsListClass
タブナビゲーションのUL要素につけるクラス名(既定値:"tabs-list")
syncheights
タブコンテンツの高さを統一する(既定値:false // true, false)要「jquery.syncheight.js」
syncHeightMethodName
上記syncheightのメソッド名(既定値:'syncHeight' // 通常は変更しない)
cssClassAvailable
何のための設定か不明。trueにするとタブ自体が消える(既定値:false // true, false)
saveState
クッキーでタブの選択を保存する。ページの再読込をしてもタブの選択を再現可能(既定値:false // true, false)要「jquery.cookie.js」
autoAnchor
他のページから任意のタブへのリンクを可能にする(既定値:false // true, false)
pagination
前後のタブへの移動ボタンを追加する(既定値:false // true, false)

「jquery.syncheight.js」「jquery.cookie.js」は、jQuery Accessible Tabsのダウンロードファイルに含まれている。

ver1.5から1.7に変更(jQueryのバージョンも1.3.2から1.4.2に変更)
公開

ページトップに戻る