Synonyme: Symbolleiste, Toolbar, Toolbox, Command Bar Tab

Siehe auch: Menü, Gruppe, Menü-Schalter

Werkzeugleisten dienen der Gruppierung von interaktiven Elementen zur Bearbeitung von Inhalten oder Daten (siehe DIN EN ISO 9241-161: 8.49).

Eine Werkzeugleiste enthält interaktive Elemente (meist Schalter oder Umschalter), die visuell gruppiert sind, z. B. mit einem Rahmen. Die Inhalte der Werkzeugleiste sind meist horizontal oberhalb oder unterhalb des Bereichs, dessen Inhalt mit den Elementen der Werkzeugleiste bearbeitet wird, angeordnet. Die Elemente der Werkzeugleiste können mehrzeilig angeordnet sein. Bei Werkzeugleisten mit vielen Schaltern werden aus Platzgründen häufig Icons als Beschriftung der Schalter verwendet.

Abbildung: Werkzeugleiste zum Einstellen von Schriftarteigenschaften

Im Folgenden werden nur die Anforderungen beschrieben, die sich direkt auf die Werkzeugleiste beziehen. Anforderungen an die interaktiven Elemente innerhalb der Werkzeugleiste sind beim jeweiligen Element beschrieben.

Nr.EigenschaftBeschreibungKlassifizierungReferenz
350VergrößerungAlle Elemente der Werkzeugleiste müssen bei einer Schriftgrößenanpassung bis 400% (und einer resultierenden Anzeigebreite von 320px) wahrnehmbar und bedienbar sein,
  • indem sie umbrechen (d. h. in mehreren Zeilen untereinander angezeigt werden) oder
  • indem die nicht in einer Zeile darstellbaren Elemente über eine Menü-Schaltfläche aufrufbar sind oder
  • indem sie gescrollt werden können.
MussEN 301 549:
9.1.4.10, 11.1.4.10
351GruppierungDamit die Tastaturbedienung visuell ersichtlich ist, soll die Werkzeugleiste so gestaltet werden, dass deren Elemente als zusammengehörig identifiziert werden können.

Hinweis: Dies kann z. B. durch einen Rahmen oder Position und Anordnung erfolgen.

SollDIN EN ISO 9241-125: 5.1.8
Nr.EigenschaftBeschreibungKlassifizierungReferenz
352TastaturbedienungDie interaktiven Elemente in der Werkzeugleiste müssen mit der Tastatur erreicht, bedient und verlassen werden können (siehe folgende Tabelle Tastaturbedienung).MussEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
353TastaturbedienungDie Werkzeugleiste darf keine Bedienelemente enthalten, die mit den Tasten bedient werden, die zur Navigation durch die Werkzeugleiste dienen.

Hinweis 1: Dies kann z. B. Eingabefelder und Ausklapplisten betreffen, da diese mit den Pfeiltasten bedient werden.

Hinweis 2: Alternativ müssen Tastaturkürzel implementiert und dokumentiert werden, mit denen die Bedienelemente verlassen werden können.

MussEN 301 549: 11.2.1.1
354TastaturbedienungIst die Werkzeugleiste nur per Tastaturkürzel erreichbar, muss dieses Tastaturkürzel in der Anwendung und Hilfe dokumentiert sein.MussEN 301 549: 9.2.1.1, 11.2.1.1
355TastaturbedienungDie Werkzeugleiste soll per Tastaturkürzel erreichbar sein.

Zusätzlich sollen häufig benötigte interaktive Elemente innerhalb der Werkzeugleiste ein Tastaturkürzel erhalten.

Die Tastaturkürzel sollen in der Hilfe und Anwendung dokumentiert werden.
SollDIN EN ISO 9241-171: 9.3.10
356AktualisierungenBei Fokussierung und Bedienung der interaktiven Elemente innerhalb der Werkzeugleiste darf keine unerwartete Kontextänderung erfolgen.MussEN 301 549: 9.3.2.1, 11.3.2.1
357AktualisierungenBei Wertänderung der Formularelemente innerhalb der Werkzeugleiste darf keine unerwartete Kontextänderung erfolgen.MussEN 301 549: 9.3.2.2, 11.3.2.2
358AktualisierungenBei Aktivierung der Bedienelemente innerhalb der Werkzeugleiste darf kein Fokusverlust erfolgen.

Hinweis: So muss nach Bedienung eines Schalters der Fokus auf diesem verbleiben oder auf das Element gesetzt werden, welches über den Schalter gesteuert wird (z. B. Eingabefeld eines Rich Text Editors oder modaler Dialog, der geöffnet wird).

MussEN 301 549: 9.2.4.3, 11.2.4.3
359KlickbereichDer Klickbereich der interaktiven Elemente der Werkzeugleiste soll mindestens 24 x 24 px betragen (siehe Zeigeinstrumentbedienung).SollWCAG 2.2

Tastaturbedienung Werkzeugleiste

Permalink "Tastaturbedienung Werkzeugleiste"
AktionTasteKlassifizierung
Fokussieren der Werkzeugleiste (erstes oder zuletzt fokussiertes Element)TAB

Hinweis: Alternativ können Werkzeugleisten über die Bereichsnavigation oder per Tastaturkürzel erreichbar sein.

Erforderlich
Verlassen der WerkzeugleisteTAB

Hinweis: Alternativ können Werkzeugleisten über die Bereichsnavigation oder eine erwartbare Kontextänderung nach Bedienung eines Elements in der Werkzeugleiste verlassen werden.

Erforderlich

Navigation innerhalb der Werkzeugleiste
  • Horizontale Werkzeugleiste: PFEIL RECHTS/LINKS,
  • Vertikale Werkzeugleiste: PFEIL RECHTS/LINKS/AUF/AB
Erforderlich
Schnellnavigation zum ersten bzw. letzten Element innerhalb der WerkzeugleistePOS1, ENDEEmpfohlen

Programmierung/Schnittstellen

Permalink "Programmierung/Schnittstellen"
Nr.EigenschaftBeschreibungKlassifizierungReferenz
360RolleDie Rolle Werkzeugleiste muss an die Accessibility API übermittelt werden (siehe Accessibility API).MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
361Desktop: ElementhierarchieDie Eltern-Kind-Beziehungen der Elemente innerhalb der Werkzeugleiste müssen an die Accessibility API übermittelt werden.MussEN 301 549: 11.5.2.9
362AusrichtungDie Ausrichtung der Werkzeugleiste (vertikal oder horizontal) muss an die Accessibility API übermittelt werden.MussEN 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
363NameSofern die Werkzeugleiste eine Beschriftung oder Beschreibung besitzt, müssen diese als Accessible Name bzw. Accessible Description übermittelt werden (siehe Beschriftung und Beschreibung).

Hinweis: Wenn die Seite mehrere Werkzeugleisten enthält, müssen diese einen knappen und aussagekräftigen Accessible Name besitzen.

MussEN 301 549:
11.2.4.6, 11.4.1.2, 11.5.2.5, 11.5.2.8
364TastaturkürzelBesitzen die Werkzeugleiste oder Bedienelemente innerhalb der Werkzeugleiste visuell sichtbare Tastaturkürzel, so müssen diese an die Accessibility API übermittelt werden.MussEN 301 549:
9.1.3.1, 11.1.3.1
365BedienungDie Elemente der Werkzeugleiste müssen mit Assistenztechnologie erreicht, bedient und verlassen werden können (siehe Accessibility API).MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17

Praxistipp Werkzeugleiste in Web-Anwendungen

Permalink "Praxistipp Werkzeugleiste in Web-Anwendungen"

Bei TAB-Navigation:

  • JAWS: [Beschriftung] Symbolleiste
  • NVDA: [Beschriftung] Werkzeugleiste
  • Windows Sprachausgabe: [Beschriftung] Symbolleiste

Mit dem virtuellen Cursor:

  • JAWS: Werkzeugleiste mit [Anzahl] Schaltern … Werkzeugleiste Ende
  • NVDA: Werkzeugleisteaußerhalb von Werkzeugleiste
  • Windows Sprachausgabe: -

In HTML existiert kein Element für Werkzeugleisten. Stattdessen können Schalter und weitere Bedienelemente in einer Liste (<menu> und <li>), beschrifteten Region (z. B. <section>) oder einer Formularfeldgruppe (<fieldset>, beschriftet mit <legend>) gruppiert werden. Die Navigation zwischen den Elementen erfolgt dann allerdings mit der TAB-Taste und nicht mit den Pfeiltasten. Um die effiziente Tastaturnavigation zu unterstützen, sollte die Region bzw. Formularfeldgruppe übersprungen werden können (siehe Praxistipp Effiziente Navigation).

Weitere Informationen: 4.4.7 The menu element - HTML Standard (whatwg.org) (Externer Link), 4.3.3 The section element - HTML Standard (whatwg.org) (Externer Link) 4.10.15 The fieldset element - HTML Standard (whatwg.org)

Bei der Umsetzung von Werkzeugleisten sollte Folgendes beachtet werden:

  • Die Rolle wird mit role=toolbar übermittelt.
  • Die Werkzeugleiste sollte mit aria-label oder aria-labelledby beschriftet werden.
  • Eine vom Standard abweichende vertikale Ausrichtung der Werkzeugleiste kann mit aria-orientation=vertical angegeben werden. Die Ausrichtung wird von Assistenztechnologie häufig nicht ausgegeben, so dass bei einer vertikal ausgerichteten Werkzeugleiste die Bedienung mit allen Pfeiltasten möglich sein sollte.
  • Die Werkzeugleiste sollte auch visuell als solche erkennbar sein, damit sehende Tastaturnutzende die Bedienung mit den Pfeiltasten erkennen können.
  • Die Werkzeugleiste sollte mindestens drei Bedienelemente enthalten.
  • Die sichtbaren Elemente innerhalb der Werkzeugleiste und das programmatisch fokussierte Element sollten die gleiche Position und Größe besitzen.

Weitere Informationen: toolbar role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link), Toolbar Pattern | APG | WAI | W3C

Informationen zu diesem Artikel

Gerne können Sie uns Feedback per E-Mail zu unserer Handreichung senden!