UI Component Lab English

← コンポーネント一覧

アクション

Toolbar ツールバー

文字の書式ボタンのように、関係する操作部品を1列にまとめたもの。

いろはにほへと ちりぬるを わかよたれそ つねならむ

別名

見分けるポイント

小さなアイコンのボタンが帯状に並び、グループの間に区切り線が入ることもある。押した状態のボタンは色が変わったままになる。

挙動

  • ツールバー全体で Tab の止まる場所は1か所だけで、中のボタンの間は矢印キーで移る。
  • Tab で戻ってくると、最後にフォーカスしていたボタンに戻る（ロービング tabindex）。
  • このデモのボタンは aria-pressed を使ったトグルボタン。

キーボード操作

キー動作
Tabツールバーへ、またはツールバーから移動する。
← / →前後のボタンへ移る（端から反対の端へ回る）。
Home / End最初または最後のボタンへ移る。
Enter / Spaceフォーカス中のボタンを押す。

使い分け・注意点

  • ツールバーとしてまとめるのは、操作部品が3つ以上あるときだけにする。
  • aria-label でツールバーに名前を付け、何のための操作群か読み上げられるようにする。
  • メニュー: ツールバーは操作部品を1列に並べて常に見せ、メニューは操作を開いたリストにしまう。
  • トグルボタン: トグルボタンはオンとオフを切り替える1つのボタンで、ツールバーは複数のボタンをまとめて矢印キーで行き来させる。

出典