スピードダイヤル
Speed dial
別名: スピードダイアル、FABメニュー、拡張FABメニュー、Speed dial、FAB menu
生態(さわってみる)
一言定義
FABをトリガーに、複数の関連アクションをラベル付きの小さなボタンとして展開するUI。
分類
使う場面
- FABから複数の関連する作成アクション(写真投稿・テキスト投稿など)を分岐させたいとき
- アクション数が2〜5個程度に収まるとき
避ける場面
- アクションが1つしかないとき(→通常のFAB)
- アクション数が多すぎて展開後も探しにくくなるとき(→通常のメニューやツールバー)
近縁種との比較
スピードダイヤルはMUIが採用した呼称で、Material Design 3では「FAB menu」や「Extended FAB」に 近い概念として扱われる、名称のゆれがあるパターンである。通常のFABが常に単一のアクションを実 行するのに対し、スピードダイヤルはFABをトリガーとして複数の関連アクションをラベル付きの小さなボ タン群として展開する点が最大の違いで、アクション数が2〜5個程度に収まる場面に向く。スプリットボ タンも1つのトリガーから複数の操作を提供する点は似ているが、スプリットボタンは常に見えるメニュ ー項目のリストであるのに対し、スピードダイヤルは展開するまで個々のアクションが見えない放射状/縦 並びの隠しUIである点で区別される。
実例リンク
アクセシビリティ
- role
- トリガーは button[aria-haspopup="true"][aria-expanded]、展開後の各アクションは role="menuitem"を持つbutton(W3C APGに専用の"speed dial"パターンは存在しないため、menu buttonパターンを準用する)
- キーボード操作
- Enter/Space/↑で展開しフォーカスを最初のアクションへ、展開後は↑↓で移動、Escで閉じてトリガーへフォーカスを戻す
- 補足
- 各ミニアクションには可視ラベルまたはaria-labelを必須にする(アイコンのみだと発見性が著しく下がる)