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

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

sponsors

使用方法

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>
*スライダー部分を繰り返して書き込んでください。

サンプル

タイトル1
コンテンツ1
タイトル2
コンテンツ2
タイトル3
コンテンツ3
タイトル4
コンテンツ4
タイトル5
コンテンツ5

sponsors

Javascriptサンプルページ一覧
skuare.net