『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.
まずは表示中のスライドにのみフォーカスが当たるようにします。
.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万人以上の人が恩恵を受けるそうです。
少しでも多くの人に快適にウェブを使ってもらうためにも、普段から心がけたいものです。