【jQuery/slick】スライドにタブでフォーカスさせない設定方法

slick.js を使ってカルーセルやスライダーを実装すると、デフォルトでは各スライド内のリンクやボタンなどが Tab キーで順にフォーカスされます。見えていないスライドにもフォーカスが移ってしまい、ユーザー体験やアクセシビリティに影響することがあります。本記事では、slick で「非表示スライドをタブ移動対象から外す」ための設定方法を紹介します。

slick のオプションで制御する
tabindex を利用して非表示スライドをフォーカス不可にする
スライド内のリンクやボタンを制御する
まとめ

slick のオプションで制御する

slick には accessibility オプションがあり、false に設定すると矢印キーでのスライド操作や Tab フォーカス制御を無効化できます。ただしこの場合は全体的なアクセシビリティ機能がオフになるので、必要に応じて別途配慮が必要です。

$('.slider').slick({
  accessibility: false
});

tabindex を利用して非表示スライドをフォーカス不可にする

より細かく制御するには、slick の afterChange イベントを使って「表示中スライドのみ tabindex="0"、それ以外は tabindex="-1"」とする方法が一般的です。

$('.slider').on('init afterChange', function(event, slick, currentSlide){
  // 全スライドのフォーカスを禁止
  $(slick.$slides).attr('tabindex', '-1');

  // 現在表示されているスライドだけ許可
  $(slick.$slides.get(slick.currentSlide)).attr('tabindex', '0');
});

$('.slider').slick();

この処理を入れると、見えていないスライドにはタブ移動できなくなり、ユーザーは表示中のコンテンツだけを順番に操作できます。

スライド内のリンクやボタンを制御する

スライド全体ではなく中の要素を制御したい場合は、対象をスライド内のフォーカス可能要素に絞ります。

$('.slider').on('init afterChange', function(event, slick){
  // 非表示スライドのリンクやボタンをフォーカス不可に
  $(slick.$slides).find('a, button, input, select, textarea')
    .attr('tabindex', '-1');

  // 表示スライドだけフォーカス許可
  $(slick.$slides.get(slick.currentSlide))
    .find('a, button, input, select, textarea')
    .attr('tabindex', '0');
});

$('.slider').slick();