LoginSignup
8

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-12-14

『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.

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

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

:frowning2: 調整前

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

:slight_smile: 調整後

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

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

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

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

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

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

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

JS
a11y: {
  enabled: false,
}

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

おわりに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8