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

Presentation

Permalink "Presentation"

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

Operation

Permalink "Operation"

keyboard shortcut , keyboard shortcut must be documented in the application and the Help option. | Must | EN 301 549: 9.2.1.1, 11.2.1.1 | | @!355 | Use of the keyboard | The toolbar should be 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. | Should | DIN EN ISO 9241-171: 9.3.10 | | @!356 | Updates | When focusing and operating the interactive elements within the toolbar, no unexpected change of context may occur. | Must | EN 301 549: 9.3.2.1, 11.3.2.1 | | @!357 | Updates | Changing the value of the form elements within the toolbar may not cause unexpected changes of context. | Must | EN 301 549: 9.3.2.2, 11.3.2.2 | | @!358 | Updates | No 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).

| Must | EN 301 549: 9.2.4.3, 11.2.4.3 | | @!359 | Click area | The click area of the interactive elements in the toolbar should total at least 24 x 24 px (see

Use of the pointing device). | Should | WCAG 2.2 |

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

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

Programming/interfaces

Permalink "Programming/interfaces"

Accessibility API (see Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!361 | Desktop: Element hierarchy | The parent / child relationships of the elements within the toolbar must be communicated to the Accessibility API. | Must | EN 301 549: 11.5.2.9 | | @!362 | Orientation | The orientation of the toolbar (vertical or horizontal) must be communicated to the Accessibility API. | Must | EN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5, 11.5.2.8 | | @!363 | Name | If the toolbar has a label or description, these must be communicated as the Accessible Name and/or Accessible Description (see

Label and

Description).

Note: If the page contains several toolbars, they must have a concise and expressive Accessible Name.

| Must | EN 301 549:
11.2.4.6, 11.4.1.2, 11.5.2.5, 11.5.2.8 | | @!364 | Keyboard shortcut | If the toolbar or control elements within the toolbar have visible keyboard shortcuts, these must be communicated to the Accessibility API. | Must | EN 301 549:
9.1.3.1, 11.1.3.1 | | @!365 | Operation | It must be possible to access, operate and exit the elements of the toolbar with assistive technology (see Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17 |

No.PropertyDescriptionClassificationReference
360RoleThe toolbar role must be communicated to the

Practical tip: toolbar in Web applications

Permalink "Practical tip: toolbar in Web applications"

Screen reader output

Permalink "Screen reader output"

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: Toolbar … outside the toolbar
  • Windows Narrator: -

HTML

Permalink "HTML"

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), 4.3.3 The section element - HTML Standard (whatwg.org) 4.10.15 The fieldset element - HTML Standard (whatwg.org)

ARIA

Permalink "ARIA"

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), Toolbar Pattern | APG | WAI | W3C

Information about this article

Date:
15.01.2024
License:
CC-BY-SA 4.0
Version:
1.0

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