スライダーで非表示中のスライドにフォーカスを当てない方法【Swiper.js】｜ウェブアクセシビリティ対応

こんにちは、webエンジニアのゾノ( @ozonosho )です。

今回は記事では人気のスライダープラグイン「Swiper.js」で非表示中のスライドにフォーカスを当てない方法をご紹介いたします。

キーボード操作でサイトを閲覧する方はタブキーを利用してコンテンツを読み進めていくため、サイト制作者は各コンテンツのtabindexを適切に制御する必要があります。

ウェブアクセシビリティの観点でいえば「フォーカス順序の制御」は適合レベル「A」を満たすために必須の対応となります。

※詳細はこちら
『フォーカス順序:達成基準 2.4.3 を理解する』

一般的に出回っているスライダー系のプラグイン（SwiperやSlickなど）はtabindexの制御がされておらず、そのまま利用するとキーボード操作でコンテンツを読み進めた際に非表示中のスライドにもフォーカスが当たってしまいます。

そのためSwiper.jsでフォーカス順序を制御できるように調整してみました。

Swiper.jsで非表示中のスライドにフォーカスを当てない方法

まずは通常どおりSwiper.jsを利用してスライダーを用意します。

<div class="swiper">
  <ul class="swiper-wrapper">
    <li class="swiper-slide"><a href="リンク先">１枚目のスライドコンテンツ</a></li>
    <li class="swiper-slide"><a href="リンク先">２枚目のスライドコンテンツ</a></li>
    <li class="swiper-slide"><a href="リンク先">３枚目のスライドコンテンツ</a></li>
  </ul>
</div>

このままではフォーカス制御されていないので、次に、１枚目のスライドコンテンツのtabindexに「0」を設定してそれ以外のスライドコンテンツのtabindexには「-1」を設定します。

<div class="swiper">
  <ul class="swiper-wrapper">
    <li class="swiper-slide"><a href="リンク先" tabindex="0">１枚目のスライドコンテンツ</a></li>
    <li class="swiper-slide"><a href="リンク先" tabindex="-1">２枚目のスライドコンテンツ</a></li>
    <li class="swiper-slide"><a href="リンク先" tabindex="-1">３枚目のスライドコンテンツ</a></li>
  </ul>
</div>

これだけでは次のスライドに切り替わった際のフォーカス制御ができないので、最後にスライドが切り替わるごとにtabindexを動的に変更するようにします。

Swiperに用意されている「slideChangeTransitionEnd」イベントを利用すればスライドの切り替えが終了するタイミングで処理を実行することができます。

var mySwiper = new Swiper('.swiper', {
  on: {
    slideChangeTransitionEnd: function () {
      $('.swiper-slide a').attr('tabindex', '-1');
      $('.swiper-slide-active a').attr('tabindex', '0');
    }
  }
});

Swiperはアクティブなスライドのclassに「swiper-slide-active」が付与される仕様なので、上記のようにアクティブなスライドのみtabindexが0になるよう制御すれば対応完了です。

これでスライドが切り替わっても表示中のスライドにのみフォーカスが当たり、非表示中のスライドにはフォーカスが当たらないようになります。