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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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