jQueryプラグイン ariaToolTips

現在位置：E-riverstyle Design ホーム DevelopmentJavaScriptライブラリ

jQuery ToolTips include WAI-ARIA

概要

title属性にしているテキストをWAI-ARIAに対応したツールチップとして表示するjQueryプラグインです。

WAI-ARIA

WAI-ARIAとは、AjaxやJavaScriptなどで作られたRIA（Rich Internet Applications）にフォーカスしたアクセシビリティを確保するための仕様です。

Accessible Rich Internet Applications (WAI-ARIA) Version 1.0

設置方法

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

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

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

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

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

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

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

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

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

<script type="text/javascript">
$(function(){
    $("a,img,span").ariaToolTips();
});
</script>

動作確認

Firefox 3.6.13
Google Chrome 8.0.552.224
Safari 5.0.2
Opera 11
Internet Explorer 8

Demo

jQueryプラグイン focusBlockSkip

富士山の写真

オプション

本プラグインはオプションで設定の変更ができます。オプションは下記表となっています。

オプション一覧
プロパティ	意味	値
tooltipsOpacity	ツールチップの透明度	数値（0から1）
tooltipsBgColor	ツールチップの背景色	カラーコード
tooltipsWidth	ツールチップの幅サイズ	数値（px、%、em）
tooltipsPadding	ツールチップのパディング	数値（px、%、em）
tooltipsFontColor	ツールチップの文字色	カラーコード
tooltipsFontSize	ツールチップの文字サイズ	数値（px、%、em）
tooltipsLeterSpace	ツールチップの文字間	数値（px、%、em）
tooltipsSpeed	ツールチップの表示スピード	数値
tooltipsXoffse	ツールチップのX座標のオフセット	数値
tooltipsYoffse	ツールチップのY座標のオフセット	数値
tooltipsRadius	ツールチップの角丸の角度	数値（px、%、em）

オプション適用例

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

<script type="text/javascript">
$(function(){
    $("#blockskip").ariaToolTips({
            tooltipsBgColor : '#39424B',
            tooltipsOpacity : 0.6,
            tooltipsSpeed : 100,
        });
});
</script>