スライダー（カルーセル）

サンプル

実装上の考慮事項

• スライダーはアクセシビリティ上の考慮事項が多く、自前ですべて実装すると大きな工数が必要になります。
  Splide は後述の考慮事項ほぼすべてをデフォルトでカバーしているため、基本的にはSplideを使用してください。
• autoWidthを指定し、大きさはCSSで指定することを推奨します。JSが読み込まれるまで大きさが確保されず、レイアウトシフトが発生してしまうためです。
• 自動再生時にスライドをホバー、フォーカスをした場合にスライドが一時停止します。
  一時停止をやめる場合はオプションにpauseOnFocus: falseとpauseOnHover: falseの記述を追加してください。
• 矢印要素の推奨位置
  矢印要素がスライドと並列で置かれているようなデザインの場合、矢印要素の記載位置は前後の2パターンが考えられます。以下は推奨なので適宜選択してください。
  インジゲーターがある場合は、スライド要素の前に記載してください。キーボード操作で矢印⇄スライド間とスライド⇄インジケーター間の行き来がどちらもしやすくなります。
  インジゲーターがない場合は、スライド要素の後に記載してください。読み上げ時にどのスライドに対応するボタンか判別しやすくなります。

アクセシビリティ上の考慮事項

• キーボードでも操作できることを確認してください（達成基準 2.1.1 キーボード (レベル A)）。
  →Splideの場合はデフォルトでキーボード操作可能です。
• インジケータのカレント表示が色のみの表現ではなく、形状の変化でも伝わることを確認してください（達成基準 1.4.1 色の使用 (レベル A)）。
• 自動再生を使用する場合、必ず一時停止の機能を提供してください（達成基準 2.2.2 一時停止、停止、非表示 (レベル A)）。
  →Splideの場合は一時停止の機能が提供されています。splide__toggleのクラスを付与したDOMを追加してください。(Splideの自動再生について)
• モーションアニメーションを停止できるようにしてください（達成基準 2.3.3 インタラクションによるアニメーション (レベル AAA)）。
  →Splideの場合、prefers-reduced-motion: reduceを検知した場合はアニメーションを停止してスライドが瞬時に表示されるようになります。
  ただしこの場合無効化されるのはcssでのtransitionのみです。独自にアニメーションを作成する場合でもcssのtransitionで対応可能な範囲で実装してください。
• 非表示のスライドにはaria-hidden="true"tabindex="-1"を付与して、スクリーンリーダーでの読み上げとキーボードフォーカスを無効化してください。
  →Splideの場合は非表示要素にはaria-hidden="true"tabindex="-1"が付与されます。
• 非表示のスライドが表示された際は、ライブリージョンを用いて読み上げを行なってください。
  ただし、自動再生時はライブリージョンを無効化してください。スライドが表示されるたび読み上げてしまうとページを表示している限り延々と読み上げをしてしまいます。
  →Splideの場合はライブリージョンはスライドにデフォルトで付与され、自動再生時はライブリージョンが無効化されます。
• その他のアクセシビリティに関してはSplideのアクセシビリティのページをご確認ください。スライダーが考慮すべきことについてかなりまとまっているため参考になります。