スワイプアクション
Swipe actions
別名: スワイプアクション、リスト行スワイプ、Swipe actions、Swipe to reveal
生態(さわってみる)
一言定義
リストの行を左右にスワイプすることで、削除・アーカイブなどの操作ボタンをその場に出現させるUI。
分類
使う場面
- メールやチャットなどモバイルの一覧で、行ごとの操作を省スペースに提供したいとき
- 削除・アーカイブなど対象が明確な行単位の操作を、素早く実行させたいとき
避ける場面
- タッチ操作を持たないデスクトップ専用画面(発見しにくい隠しジェスチャーになる)
- 存在に気づかれることが重要な、頻度の低い重要操作(→常時表示のボタンやケバブメニュー)
近縁種との比較
スワイプアクションは行単位の操作を隠しておき、タッチのドラッグ操作で必要なときだけ出現させる点で省スペースだが、その操作の存在自体に気づきにくいという弱点を持つ。ケバブメニュー(⋮)は同じ「行に対する複数操作の一覧」を提供する点で近縁だが、常時見えるアイコンをタップして開く方式のため発見しやすく、タッチを前提としないデスクトップ環境でも成立する。この対比はまさに「タッチ操作主体で隠れているスワイプアクション」対「常時可視のケバブメニュー」という視認性の違いであり、本図鑑ではスワイプアクションを採用する場合でも、キーボード操作・スクリーンリーダー利用者向けに同じ操作へ到達できる可視の代替経路(行フォーカス+Enterでの展開など)を必須としている。プルトゥリフレッシュとは、どちらも指のドラッグを直接の操作トリガーとする点で近縁だが、対象が一覧全体か行単位かという粒度、および結果が単一の再読込か複数の操作候補の提示かという点で異なる。
実例リンク
アクセシビリティ
- role
- 各行はlistitem。スワイプで現れる操作ボタン群は、表示された時点で通常のbutton要素としてDOM上に存在させる
- キーボード操作
- 行にフォーカスしEnterを押すと、スワイプ時と同じ操作ボタン群が表示される代替経路を必ず用意する。ドラッグ操作をキーボード・スクリーンリーダー利用者に強制しない
- 補足
- 「スワイプでしか出せない操作」を作らないことが必須要件。本図鑑のデモも行フォーカス+Enterで同じ操作ボタンを表示する代替を実装している