bxslider で現在表示されているスライドにのみtabでフォーカスが当たるようにする

レスポンシブ対応のスライダーも増えてきたのだけれど、アクセシビリティに対応しているかどうか、という目で見ると手っ取り早く導入できるスライダーは限られてくるみたい。

キャレットブラウズモードで確認すると、スライドショーのボタンにカーソルが飛ばなかったり、そもそも全部orナッシング的なカーソルの飛び方になったりする。アクセシビリティに配慮したjqueryのモジュール探すのもなかなか厄介な話だと思いながらbxsliderを使うことにした。

要望には、「非表示の要素にカーソルが飛ばないこと」というものが含まれたので、それを実現させてみた。

幸い、使えるオプションが多くて助かった。

$(document).ready(function(){
    var myslider = $('.bxslider').bxSlider({
    onSliderLoad: function(currentIndex){
      $('.bxslider>li').find("a").attr( "tabindex", "-1" );
      $('.bxslider>li').eq(1).find("a").attr('tabindex', "0");
    },
    onSlideAfter: function(slideElement, oldIndex, newIndex){
      $('.bxslider>li').find("a").attr('tabindex', "-1");
      $('.bxslider>li').eq(newIndex+1).find("a").attr('tabindex', "0");
    }
  });
});

渡ってくるIndexの値が一個ずれてるんだよね。それでそこそこ悩んでしまった。しょうがないから、+1してあるのカッコ悪。

参考にしたのはこれ。 bxSlider Accessibility