【jQuery】スライダーの非表示スライドにタブキーでフォーカスさせない方法｜tabindex・inert・slick・アクセシビリティまで

スライダー（カルーセル）の非アクティブなスライド内にリンクやボタンがある場合、タブキーで非表示スライドのリンクにフォーカスが移ってしまいます。この記事ではtabindex=”-1″・inert属性・slick.jsでの対応・アクセシビリティを損なわないフォーカス管理まで解説します。

問題: 非表示スライドにフォーカスが入ってしまう

CSSで display:none の要素はフォーカスされませんが、visibility:hidden や opacity:0、transform: translateX(-100%) などでスライド外に移動している場合は、見た目は隠れていてもフォーカス可能な状態のままです。

ユーザーがタブキーで操作すると、見えないスライドのリンクにフォーカスが移って混乱します。

方法1: tabindex=”-1″ で個別にフォーカスを無効化

$(function () {
  var FOCUSABLE = 'a, button, input, select, textarea, [tabindex]';

  function updateFocusable() {
    // 全スライドのフォーカス可能要素を -1 に
    $('.slide').find(FOCUSABLE).attr('tabindex', '-1');

    // アクティブなスライドのみ0に戻す
    $('.slide.is-active').find(FOCUSABLE).attr('tabindex', '0');
  }

  updateFocusable(); // 初期化

  // スライド切り替え時に更新
  $('.prev-btn, .next-btn').on('click', function () {
    // スライドを切り替える処理...
    updateFocusable();
  });
});

方法2: inert属性でスライドごとまとめてフォーカス無効化（推奨）

HTML5の inert 属性を使うと、要素内の全インタラクションを一括で無効化できます。フォーカス・クリック・スクリーンリーダーの読み上げも無効になります。

$(function () {
  function updateSlides(activeIndex) {
    $('.slide').each(function (i) {
      if (i === activeIndex) {
        // アクティブスライド: inert を削除
        this.removeAttribute('inert');
        $(this).attr('aria-hidden', 'false');
      } else {
        // 非アクティブスライド: inert を設定
        this.setAttribute('inert', '');
        $(this).attr('aria-hidden', 'true');
      }
    });
  }

  var currentSlide = 0;
  updateSlides(currentSlide);
});

slick.js での対応方法

slick.js は accessibility: true（デフォルト）を設定すると、非アクティブスライドに aria-hidden="true" を自動で付与します。しかしフォーカス管理は完全ではない場合があるため、追加の対応が必要なことがあります。

$(function () {
  $('#slider').slick({
    accessibility: true, // aria属性を自動管理（デフォルトtrue）
    // ...その他オプション
  });

  // slickのafterChange後にfocusableを更新
  $('#slider').on('afterChange', function (event, slick, currentSlide) {
    var FOCUSABLE = 'a, button, input, [tabindex]';

    // 全スライドのフォーカスを無効化
    $(this).find('.slick-slide').find(FOCUSABLE).attr('tabindex', '-1');

    // 表示中のスライドのみ有効化
    $(this).find('.slick-slide:not([aria-hidden=true])').find(FOCUSABLE).attr('tabindex', '0');
  }).trigger('afterChange', [null, null, 0]); // 初回実行
});

各方法の比較

まとめ

スライダーのフォーカス管理のポイントをまとめます。

• 基本: スライド切り替え時に tabindex="-1"/-"0" を更新
• 推奨: inert 属性 + aria-hidden="true" でまとめて無効化
• slick.js: afterChange後にtabindexを更新
• フォーカス管理はアクセシビリティの重要な要素

関連記事: 要素にフォーカスを当てる完全ガイド / 各スライドの高さを揃える方法完全ガイド

よくある質問（FAQ）