skuare.net

アクセッシブルなスライダーjavascript「Accessible News Slider」

巷にはスライダーのスクリプトが溢れていますが、W3Cの定めるWCAG 1.0.に準拠していないケースが多々あります。
Accessible News Sliderは完全に準拠し、javascriptがoffの環境でもアクセッシブルなスライダーを作成できるjavascriptを紹介しています。

使用方法
Accessible News Sliderからファイル群をダウンロードします。
<link rel="stylesheet" href="http://yourdomain/jquery.accessible-news-slider.css" type="text/css" media="screen, projection">
<script language="javascript" type="text/javascript" src="http://yourdomain/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://yourdomain/jquery.accessible-news-slider.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("class名").accessNews({
newsHeadline: "タイトル",
newsSpeed: "normal" //slow,nomal,fast（または数字：1が最速）
});
});
</script>
上記を記述したらスライダーの中を以下のようにします。
<div class="news_slider demo">
　<a href="#" class="prev"><img src="http://yourdomain/prev.gif" width="16" height="16" alt="Previous" title="Previous" env="images"></a>
　<a href="#" class="next"><img src="http://yourdomain/next.gif" width="16" height="16" alt="Next" title="Next" env="images"></a>
　　<div class="news_items">
　　　<div class="container fl">
　　　　<!-- ここからスライダー -->
　　　　　<div class="item fl">
　　　　　　<a href="/"><img src="http://yourdomain/photo.gif" width="75" height="75" alt="" class="fl" /></a>
　　　　　　<div class="fl">
　　　　　　　コンテンツ1
　　　　　　</div>
　　　　　</div>
　　　　<!-- ここまでスライダー -->
　　　</div>
　　</div>
　</div>
＊スライダー部分を繰り返して書き込んでください。
アクセッシブルなスライダーjavascript「Accessible News Slider」サンプル

｜ ｜ ｜ ｜ ｜ ｜

前の記事：JavaScriptライブラリの先駆け「prototype」を勉強しなおすサイト20
次の記事：javascriptライブラリ「prototype」でコンテキストメニューを作成

関連記事

• [jQuery]wSlide
• 簡単導入スライドjavascript「jquery.toggleElements.js」
• スライドするパネルを作成するjavascript「jQuery Sliding Panels」
• スライド間をいい感じにスクロールするjavascript「jQuery.LocalScroll」
• コンテンツをスライド表示するjavascript「Coda-Slider」