はじめに
Splide はアクセシビリティの対応ができているライブラリで知られていますが
最終更新が2022年9月14日と随分と時間が経っていることから
安易に導入するのが悩ましいところでした。
それに対して、Swiper は更新が続いていることから
できることであれば、Splide から Swiper に移行したいと考えていました。
前提
今回利用する Swiper のバージョンは 12.0.2 です。
Vue や React などのフレームワークは使用せず
HTML、CSS、JS のみで実装しています。
問題点
Swiper にはアクセシビリティ対応のためのモジュールがありますが、以下の問題があります。
適切な role が設定されていない
要素がインタラクティブな単位で role が設定されておらず不十分さを感じました。
role="group" と aria-roledescription 属性を使用して
目的を正確に説明し、スクリーンリーダーのユーザーに提供すべき。
スライド変更時のリアルタイムアナウンスがない
- スクリーンリーダーのユーザーが表示されているスライドに変更があったことがわからない
- アクセシブルな名前・役割・値の更新はライブリージョンを通じて伝達されることを要求する WCAG 4.1.2 に違反 ※
※ ライブリージョンとは
画面上の変更をスクリーンリーダーがリアルタイムで読み上げる機能
タッチできる要素のサイズが小さすぎる
24x24px 未満と小さすぎるので、WCAG 2.5.8 ターゲットサイズに違反
対応内容
-
role="group"のロールを明確にするため aria-roledescription を追加 - スライドの読み上げを有効化するため、
aria-live="off"を削除 - 読み上げ用の要素を追加
- ページネーションを読み上げを実装
- ページャーを読み上げを実装
- 再生ボタンを読み上げを実装
実装
実際に実装したコードは以下の StackBlitz から確認できます。
実装の解説については、コード上にコメントを記載しています。
おわりに
今回の Swiper を Splide により近づけることを試みたことで
アクセシビリティ対応に関して、スキルアップの良い機会となりました。
スクリーンリーダーによる読み上げに関しては
今まではなんとなく実装していたのですが、より深く理解することができました。
また、ライブリージョンの実装に関しては
これまで未知の領域だったため、実装方法を習得できたのは大きな収穫となりました。
今回の実装で Swiper が Splide の代替となる道筋ができたので
積極的に利用していきたいと考えています。
本記事を読んでいただき、ありがとうございました！！
Discussion