スライドプラグイン「Splide」「Swiper」のアクセシビリティ対応の検証

こんにちは。ネットソリューション事業部の高田です。
ウェブサイトではスライドコンテンツをよく目にします。メインビジュアルとして使用されることも多く、デザイン性の高いビジュアルを持つものもあります。一方で、アクセシビリティの検証を行うとエラーが出ることが多く、スクリーンリーダーで読み上げた際に分かりにくい場合も少なくありません。

今回はアクセシビリティに配慮したスライダーの「Splide」と、導入例が多く、オプションが豊富な「Swiper」を検証したいと思います。

Splideのアクセシビリティ検証

Splideはアクセシビリティへの配慮や軽量性を特徴としたスライダーです。また、公式ドキュメントが日本語で提供されており、読みやすい点も魅力です。
実際にダウンロードして、デフォルト設定のスライダーを検証しました。

自動検証ツールでの検証

デフォルト設定では、「次へ」「前へ」の矢印ボタンとページネーションボタンがあるスライダーが用意されています。これをアクセシビリティ自動検証ツール「axe」で確認しました。

検証結果：問題点は0件でした（※ベストプラクティス機能はオフの状態）。
アクセシビリティの検証ではrole属性やaria属性の使用に関連した指摘が自動検証ツールで挙げられることが多いですが、Splideはこれらの点で優れていることが分かります。

スクリーンリーダーでの検証

次に、スクリーンリーダー（NVDA）での読み上げを確認しました。
「次へ」「前へ」のボタンを押下した場合は以下の内容が読み上げられます。

• 現在のスライド番号
• スライド全体の中での位置（例：3分の2）
• アクティブスライドの代替テキスト

ページネーションボタンを押下した場合も同様の読み上げが行われます。
また、タブリストとしての操作が可能で、キーボードの左右矢印キーやhome/endキーでの移動ができます。

以上の結果から、Splideはスクリーンリーダーを使用する際にも必要な情報を適切に提供できていると判断できます。

Splideを使用するメリット

検証の結果、Splideを使用すればアクセシビリティに配慮したスライダーを作成できることが分かりました。
さらに、自動再生機能や再生・停止ボタンを追加することも可能で、WCAGの2.2.1や2.2.2の達成基準も考慮することができます。
ただし、2022年以降更新が停止しているようなので、今後バグが発生した場合の対応が不明という懸念はあります。それでも、アクセシビリティに優れたスライダーとして候補に挙げられるプラグインです。

Swiperのアクセシビリティ検証

Swiperは導入例が多く、オプションが豊富でカスタマイズ性を持つスライダーです。
こちらも実際にダウンロードして検証しました。

自動検証ツールでの検証

Splideと同様に、「次へ」「前へ」の矢印ボタンとページネーションボタンがあるスライダーを「axe」で確認しました。

検証結果：問題点は0件でした（※ベストプラクティス機能はオフの状態）。
基本的な設定では、アクセシビリティに関して大きな問題はないようです。

スクリーンリーダーでの検証

次に、スクリーンリーダー（NVDA）での読み上げを確認しました。
「次へ」「前へ」のボタンを押下した場合は動作に関する読み上げは行われませんでした。

ページネーションボタンを押下した場合は「現在」と読み上げられます。
また、フォーカスを当てた際は「Go to slide1 button」等の押下後の移動先について読み上げられます。

上記のようなデフォルトの状態ではスクリーンリーダーの読み上げが分かりにくいと感じました。
ただし、アクセシビリティ用オプションSwiper API（accessibility-a11y）が用意されており、読み上げに関するカスタマイズが可能です。

Swiperを使用するメリット

検証の結果、Swiperは自動検証ツールではアクセシビリティが確保されているように見えるものの、スクリーンリーダーでの使用感に課題があることが分かりました。
ただし、アクセシビリティ用のオプションを活用すれば改善が可能です。
また、導入例も多いため、今後さらにアクセシビリティに配慮したオプションが追加される可能性も期待できます。

最後に

今回は2種類のスライダーについて検証を行いました。
アクセシビリティへの配慮が高いのはSplideですが、デザインや独自の実装が必要な場合はSwiperをベースにアクセシビリティオプションを活用する方法が適しているケースもあると考えられます。

スライドコンテンツは、元々スクリーンリーダーなどの支援技術への対応が難しい特性を持つため、多用せず、分かりやすいウェブサイト構成を心掛けることが重要です。スライダーを使用する際は、今回検証したようなプラグインを活用し、常にアクセシビリティへの配慮を心掛けると良いでしょう。

関連サービス

• フレンセルのWebアクセシビリティ診断サービス