Synonyms: Symbols bar, toolbox, command bar tab

See also: Menu , group , menu button

Toolbars serve the grouping of interactive elements for the editing of content or data (see DIN EN ISO 9241-161: 8.49).

A toolbar contains interactive elements (in most cases, buttons or toggle switches) that are grouped visually with a border, for example. The contents of the toolbar are usually arranged horizontally above or below the area, the contents of which are edited with the elements of the toolbar. The elements of the toolbar can be arranged in several lines. For toolbars with several buttons, icons are often used to label the buttons due to space-related constraints.

Figure 20: Toolbar for setting the font style properties

Only those requirements that are directly related to the toolbar are described below. Requirements regarding interactive elements within the toolbar are described at the respective element.

No.PropertyDescriptionClassificationReference
350ResizingAll elements of the toolbar must be perceptible and operable with a font size adjustment of up to 400% (and a resulting display width of 320 px),
  • in the sense that they wrap (i.e. they are shown in several successive rows), or
  • in the sense that the elements that cannot be displayed in a row can be called up using a menu button, or
  • in the sense that they can be scrolled.
MustEN 301 549:
9.1.4.10, 11.1.4.10
351GroupingTo make the use of the keyboard visible, the toolbar should be designed in such a way that its elements can be identified as belonging together.

Note: This can take place, for example, with a border or position and arrangement.

ShouldDIN EN ISO 9241-125: 5.1.8
Nr.EigenschaftBeschreibungKlassifizierungReferenz
352Use of the keyboardIt must be possible to access, operate and exit the interactive elements in the toolbar with the keyboard (see Use of the keyboard table, below).MustEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
353Use of the keyboardThe toolbar may not contain any control elements that are operated by the keys designed for navigation through the toolbar.

Note 1: This can affect input fields and drop-down lists, for example, as they are operated with the arrow keys.

Note 2: Alternatively, keyboard shortcuts must be implemented and documented with which it is possible to exit the control elements.

MustEN 301 549: 11.2.1.1
354Use of the keyboardIf the toolbar is only accessible by keyboard shortcut

Frequently used interactive elements within the toolbar should also be given a keyboard shortcut.

The keyboard shortcuts should be documented in the Help option and application.
ShouldDIN EN ISO 9241-171: 9.3.10
356UpdatesWhen focusing and operating the interactive elements within the toolbar, no unexpected change of context may occur.MustEN 301 549: 9.3.2.1, 11.3.2.1
357UpdatesChanging the value of the form elements within the toolbar may not cause unexpected changes of context.MustEN 301 549: 9.3.2.2, 11.3.2.2
358UpdatesNo loss of focus may occur when the control elements within the toolbar are enabled.

Note: Therefore, after operating a button, the focus must remain on the button or be placed on the element which is controlled by the button (e.g. input field of a Rich Text Editor or modal dialog which is opened).

MustEN 301 549: 9.2.4.3, 11.2.4.3
359Click areaThe click area of the interactive elements in the toolbar should total at least 24 x 24 px (see Use of the pointing device

Use of the keyboard: toolbar

Permalink "Use of the keyboard: toolbar"
ActionKeyClassification
Focusing of the toolbar (first or last focused element)TAB

Note: Alternatively, toolbars can be accessed by the area navigation or by keyboard shortcut.

Required
Exiting the toolbarTAB

Note: Alternatively, toolbars can be exited by the area navigation or an expected change of context after the operation of an element in the toolbar.

Required
Navigating within the toolbar
  • Horizontal toolbar: RIGHT/LEFT ARROW,
  • Vertical toolbar: RIGHT/LEFT/UP/DOWN ARROW,
Required
Quick navigation to the first and/or last element within the toolbarPOS1, ENDRecommended
No.PropertyDescriptionClassificationReference
360RoleThe toolbar role must be communicated to the Accessibility APILabelDescription
11.2.4.6, 11.4.1.2, 11.5.2.5, 11.5.2.8
364Keyboard shortcutIf the toolbar or control elements within the toolbar have visible keyboard shortcuts, these must be communicated to the Accessibility API.MustEN 301 549:
9.1.3.1, 11.1.3.1
365OperationIt must be possible to access, operate and exit the elements of the toolbar with assistive technology (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17

Practical tip: toolbar in Web applications

Permalink "Practical tip: toolbar in Web applications"

With TAB navigation:

  • JAWS: [label] symbols bar
  • NVDA: [label] toolbar
  • Windows Narrator: [label] symbols bar

With the virtual cursor :

  • JAWS: Toolbar with [amount] buttons … toolbar end
  • NVDA: Toolbaroutside the toolbar
  • Windows Narrator: -

There is no element for toolbars in HTML. Instead of this, buttons and other control elements can be grouped in a list (<menu> and <li>), a labeled region (e.g. <section>) or form field group (<fieldset>, labeled with <legend>). The navigation between the elements then takes place with the TAB key and not the arrow keys. To support the efficient keyboard navigation, it should be possible to skip the region and/or form field group (see practical tip on efficient navigation).

Further information: 4.4.7 The menu element - HTML Standard (whatwg.org) (External Link), 4.3.3 The section element - HTML Standard (whatwg.org) (External Link) 4.10.15 The fieldset element - HTML Standard (whatwg.org)

When implementing toolbars, the following should be taken into account:

  • The role is communicated with role=toolbar.
  • The toolbar should be labeled with aria-label or aria-labelledby.
  • A non-standard vertical orientation of the toolbar can be specified with aria-orientation=vertical. Frequently, the orientation is not output by the assistive technology, so that with a vertically oriented toolbar, operation with all arrow keys should be possible.
  • The toolbar should also be visually recognizable as such, so that sighted keyboard users are able to recognize the operation with the arrow keys.
  • The toolbar should contain at least three control elements.
  • The visible elements within the toolbar and the programmatically focused element should have the same position and size.

Further information: toolbar role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), Toolbar Pattern | APG | WAI | W3C

Information about this article

You are welcome to send feedback by email about our handout!