前と後ろのボタンがあります
スワイプは補完的な方法ですが、アイテムを移動する唯一の方法ではありません。
カルーセル デザインシステム
場所を制御しながら、コンテンツを順番に閲覧できます。
チェックリストの内容
確認の進捗
01
構造と意味
使用状況に応じて情報とプレゼンテーションを比較します。
02
インタラクションとユーザビリティ
操作を試し、ステータスを変更して作業を続行します。
03
体験を完了する
デザインを実用化する際に見落としがちな細部を確認してください。
進捗はこのブラウザーに自動保存されます。
ガイド
確認方法
使用例
使用例
前と後ろのボタンがあります
商品写真には「前の写真」「次の写真」ボタンと2/5ラベルが付いています。
バリエーションと利用場面
コンテンツの転送方法
前後ボタンと適切なタッチ操作をサポートします。人々にスワイプを強制することは避けてください。
キーボードだけを使用してからタッチしてみてください。どちらの方法でも同じアイテムにアクセスできます。
例 「次の写真」ボタンは水平スワイプで機能します。
コンテンツセット内の場所
表示しているアイテムとアイテムの総数を明確なラベルで示します。
ボタンとスワイプで切り替えます。カウンタは、表示されている画像に応じて更新する必要があります。
例 名前のない 5 つの点の代わりに「写真 2 / 5」を表示します。
制御された動き
手動で移動している場合は、停止し、動きを減らすためのデバイスの選択を尊重します。
モーション軽減をオンにして、カルーセルに焦点を当てます。読んでいる内容を変更しないでください。
例 ユーザーが操作を開始すると、カルーセルは自動的に実行を停止します。
アイテムは閲覧されています
現在のアイテムのコンテンツとアクションを明確にしておき、非表示のスライドに焦点を当てないようにしてください。
複数のスライドを含むカルーセルをタブで移動します。現在のスライドの外側にあるリンクにはフォーカスがありません。
例 現在タブ オーダー内にあるのは製品詳細ボタンのみです。