Swiperアクセシビリティ改善のススメ #CSS

『un-T factory! XA Advent Calendar 2022』 15日目です。
どうぞよろしくお願いします。

はじめに

カルーセルを実装する際、アクセシビリティの設定はしていますか？
Swiperでは、デフォルトでaria属性・role属性がスライドやprev・nextボタン、ページネーションに付与されます。
ですが、それらは全て英語で設定されています。
日本人向けのサイトを制作するのであれば日本語で設定してあげるほうが親切ですよね。
意外と簡単に実装できますので、まだやったことがないという方はぜひ取り組んでみてください。

Swiperはv8.4.5を使用します。

アクセシビリティに関するオプション

Swiperにはアクセシビリティに関するオプションが用意されています。

a11y

オプション名	初期値	説明
containerMessage	null	`.swiper`のスクリーンリーダー用メッセージ
containerRoleDescriptionMessage	null	`.swiper`の役割を説明するスクリーンリーダー用メッセージ。aria-roledescription属性の値
enabled	true	a11yオプションを有効にするかどうか
firstSlideMessage	'This is the first slide'	最初のスライドのスクリーンリーダー用メッセージ
id	null	`.swiper-wrapper`に設定するid属性の値。nullの場合は自動的に生成される
itemRoleDescriptionMessage	null	スライドの役割を説明するスクリーンリーダー用メッセージ。`.swiper-slide`のaria-roledescription属性の値
lastSlideMessage	'This is the last slide'	最後のスライドのスクリーンリーダー用メッセージ
nextSlideMessage	'Next slide'	「次へ」ボタンのスクリーンリーダー用メッセージ
notificationClass	'swiper-notification'	a11yを使用したら追加されるクラス名
paginationBulletMessage	'Go to slide {{index}}'	ページネーションのスクリーンリーダー用メッセージ
prevSlideMessage	'Previous slide'	「前へ」ボタンのスクリーンリーダー用メッセージ
slideLabelMessage	'{{index}} / {{slidesLength}}'	スライドのラベルを説明するスクリーンリーダー用メッセージ
slideRole	'group'	`.swiper-slide`のrole属性の値

スライドが画像のみの場合

日本語に変更したい部分をa11yのオプションでお好みの内容に変更します。
※aria属性について知りたい方は@k__watanabeさんの「今日から始める負担にならないWAI-ARIA」がおすすめです。

また、キーボード操作のオプションを設定すると、キーボードの ← → キーでスライドを操作できるようになります。

See the Pen Untitled by Iwahashi Aki (@iwahashi_a) on CodePen.

スライド内にリンクが含まれている場合

ちょっと厄介なのがスライド内にテキストリンクやボタンを含んでいる場合です。
何も調整をしないままだとタブキー操作でのフォーカスが、現在表示されていないスライドにも当たってしまい操作性が悪くなります。

調整前

See the Pen Untitled by Iwahashi Aki (@iwahashi_a) on CodePen.

調整後

See the Pen Swiper_ by Iwahashi Aki (@iwahashi_a) on CodePen.

まずは表示中のスライドにのみフォーカスが当たるようにします。

SCSS

.swiper-slide {
  visibility: hidden;
  &.swiper-slide-active {
    visibility: visible;
  }
}

次に、Swiperに用意されているslideChangeTransitionEndというイベントを使い、スライドが切り替わったタイミングでリンクにフォーカスが当たるようにします。
slideChangeTransitionEndはスライド切り替えのアニメーション終了後のタイミングで発火します。

swiper.on('slideChangeTransitionEnd', () => {
  const link = document.querySelector(
    '.swiper-slide.swiper-slide-active .content a'
  );
  link.focus();
});

アクセシビリティの設定は直接HTMLに設定できる？

可能です。
その場合はオプションのenabledをfalseにしてください。
ただしaria-labelやrole属性など、デフォルトのアクセシビリティ設定が全て消えるので、上級者向けに感じます。

a11y: {
  enabled: false,
}

See the Pen Untitled by Iwahashi Aki (@iwahashi_a) on CodePen.

おわりに

オプションを使えば結構お手軽に設定できますよね。
最近デジタル庁が公開した「ウェブアクセシビリティ導入ガイドブック」によると、ウェブアクセシビリティを確保することで、日本では428万人以上の人が恩恵を受けるそうです。
少しでも多くの人に快適にウェブを使ってもらうためにも、普段から心がけたいものです。