カルーセル
Carousel
別名: カルーセル、スライダー、スライドショー、Carousel、Slider、Slideshow
生態（さわってみる）
一言定義
複数のスライドを横方向に切り替えながら順送りに表示するUI。
分類
使う場面
- 複数の訴求やおすすめ商品などを、限られた面積で順に見せたいとき
- ユーザー自身が前後にスワイプ・クリックして閲覧をコントロールできるようにしたいとき
避ける場面
- 値の調整に使う入力部品が必要なとき（→スライダー、名称の衝突に注意）
- 自動再生が読了やタスク達成の妨げになる可能性が高いとき（本図鑑のデモも自動再生は既定オフ）
近縁種との比較
「カルーセル」「スライダー」「スライドショー」は同じUIを指す語として並立するが、「スライダー」は値をつまみで調整する入力部品（→スライダー）と語が衝突するため、本図鑑では研究ノートの指摘どおり「カルーセル」を見出し名に採用する。タブとはどちらも並列コンテンツを同じ領域で切り替える点が似ているが、タブはクリックで能動的に選び切り替える離散的なナビゲーションであるのに対し、カルーセルはドラッグや自動再生による連続的な順送りを基本とする点で異なる。ライトボックスとは画像を切り替えて見せる点が似ているが、ライトボックスはサムネイルのクリックをきっかけに暗転オーバーレイとして開く一時的な表示であるのに対し、カルーセルはページ内にインラインで常時表示される点で異なる。
実例リンク
アクセシビリティ
- role
- スライド群はaria-roledescription="carousel"を持つrole="region"とし、各スライドはaria-roledescription="slide"のrole="group"。ドットはrole="tablist"/"tab"として現在位置をaria-selectedで示す
- キーボード操作
- ←→キーで前後のスライドへ。自動再生中は一時停止できるボタンを提供する
- 補足
- 自動再生はユーザーの読了を妨げたり、スクリーンリーダー利用者の操作を阻害するリスクがあるため既定でオフにし、明示的なopt-inボタンで開始する。prefers-reduced-motionが有効な環境では切り替えアニメーションを行わず瞬時に表示を切り替える