Toolbar

A toolbar is a set of controls collected into one strip because they all act on the same thing: the document, the selection, the list below them. The collection is the component. Any one of its buttons would work perfectly well on its own, and putting them in a row is what tells a reader they belong to the same subject and can be reached in one place.

The part people underestimate is the keyboard contract. A toolbar is a composite widget: it takes a single stop in the tab order, and once focus is inside it, Left and Right arrows move between the items, with Home and End jumping to the ends. That is the roving tabindex pattern, and it exists so that a formatting strip with fourteen buttons does not add fourteen stops between a person and the text they were editing. Skipping it is the most common way a toolbar is built wrong: everything looks right and every icon is a separate stop.

The word is contested at the edges. Fluent calls the same idea a command bar; plenty of teams say action bar. Some vocabularies use toolbar for the whole strip across the top of a window, which is closer to what this site calls an app bar or a navigation bar. The test that keeps them apart is what the controls act on: a toolbar acts on the current view, while a navigation bar takes you to another one. Do not put role="toolbar" on a row of links.

Inside the strip, keep related controls adjacent and separate the groups with a thin rule, since the grouping is doing real work for anyone scanning it. Icon-only buttons need accessible names and, for pointer users, tooltips. Toggles carry aria-pressed, and a set of mutually exclusive options is a radio group rather than several unrelated toggles, so assistive technology reports “one of three” instead of three separate states that happen to agree.