Controls

Accessible toolbars: Examples and Testing

Published by whatisADA / Grow Wild Agency · Updated

What to build

A toolbar groups a related set of controls and, when using the ARIA toolbar pattern, provides efficient keyboard movement within that group. Supply a useful name and preserve each control's own role and state.

A practical example

An editor groups text-formatting controls in a Formatting toolbar. A single entry point and arrow navigation reduce repeated Tab stops while Bold and Italic retain their pressed states.

How to check it

  1. Enter and leave the toolbar using Tab and navigate inside using the chosen arrow-key model.
  2. Operate each type of control, checking that its own key behavior does not conflict with toolbar navigation.
  3. Verify roving focus, disabled controls and the toolbar's accessible name.

What can be missed

A row of ordinary buttons does not always need a toolbar role. Adding the role without its keyboard behavior can create expectations the interface does not fulfill.

Markup and state contract

This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.

<div role="toolbar" aria-label="Text formatting">
  <button type="button" aria-pressed="false" tabindex="0">Bold</button>
  <button type="button" aria-pressed="false" tabindex="-1">Italic</button>
</div>

Record your test

Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.

These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.

Primary sources and scope

This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.