Rolle Dokumentstruktur

`toolbar`

Kennzeichnet einen Container als Toolbar — eine gruppierte Menge zusammengehöriger Steuerelemente (eine Formatierungsleiste, eine Reihe von Schaltflächen mit Symbolen). Reduziert die Tab-Stop-Kosten: Eine Toolbar mit 10 Schaltflächen wird zu einem einzigen Tab-Stop; Pfeiltasten navigieren zwischen den Schaltflächen.

Wann verwenden

Wenn eine Zeile (oder Spalte) mit drei oder mehr zusammengehörigen Steuerelementen vorhanden ist — eine Formatierungsleiste in einem Texteditor, die Symbolleiste über einem Chat-Eingabefeld, Foto-Bearbeitungsaktionen. Der Vorteil liegt in der Tastatureffizienz: Anstatt dass jede Schaltfläche einen eigenen Tab-Stop belegt, verbraucht die Toolbar nur einen Tab-Stop und gibt ihre Kindelemente über Pfeiltasten frei.

Eine Toolbar MUSS einen barrierefreien Namen besitzen (aria-label oder aria-labelledby). Die Ausrichtung ist standardmäßig horizontal; aria-orientation="vertical" ist für eine vertikale Leiste zu setzen.

Kindelemente sind in der Regel Schaltflächen (<button>), mit role="separator" zwischen logischen Gruppen. Toolbars KÖNNEN Schaltflächen, Toggle-Buttons, Links, Menü-Schaltflächen und weitere kleine Steuerelemente enthalten — nicht jedoch vollständige Formulare oder Listenwidgets.

Tastatur- und Fokusvertrag

Gemäß dem APG-Toolbar-Muster:

Tab verschiebt den Fokus in die Toolbar auf das erste oder zuletzt fokussierte Steuerelement; ein weiterer Tab-Druck bewegt den Fokus heraus.
Rechts-/Linkspfeil (bzw. Aufwärts-/Abwärtspfeil bei vertikaler Ausrichtung) navigieren zwischen den Toolbar-Elementen.
Pos1 / Ende springen zum ersten bzw. letzten Element.
Jede einzelne Schaltfläche wird weiterhin per Eingabetaste oder Leertaste aktiviert — ihr Aktivierungsvertrag wird durch die Toolbar-Rolle nicht verändert.

Zu verwenden ist ein Roving-Tabindex: Zu jedem Zeitpunkt hat nur ein Toolbar-Element tabindex="0".

Häufige Fehler

Alle Schaltflächen in der Toolbar haben tabindex="0". Das hebelt den gesamten Zweck aus — Tab durchläuft trotzdem jede Schaltfläche einzeln.
Toolbar ohne barrierefreien Namen.
Toolbar-Schaltflächen ohne Beschriftung, weil die Darstellung ausschließlich aus einem Symbol besteht. Jede Schaltfläche muss ein aria-label erhalten.
Vermischung von Toolbar- und role="group"-Semantik. Es ist eine Rolle zu wählen: Eine Toolbar impliziert Pfeiltasten-Navigation, eine Gruppe nicht.
role="toolbar" auf einem <nav>-Element. Die Rollen stehen im Konflikt — nur eine ist zu verwenden.

Beispiel

<div role="toolbar" aria-label="Text formatting">
  <button type="button" tabindex="0"  aria-pressed="false" aria-label="Bold">B</button>
  <button type="button" tabindex="-1" aria-pressed="false" aria-label="Italic">I</button>
  <button type="button" tabindex="-1" aria-pressed="false" aria-label="Underline">U</button>
  <span role="separator" aria-orientation="vertical"></span>
  <button type="button" tabindex="-1" aria-label="Insert link">Link</button>
</div>