ARIA: toolbar Rolle

Eine Toolbar ist eine Sammlung von häufig verwendeten Steuerelementen, wie Schaltflächen oder Kontrollkästchen, die in kompakter visueller Form gruppiert sind. Die toolbar-Rolle kann verwendet werden, um das Vorhandensein und den Zweck einer solchen Gruppierung den Benutzern von Screenreadern mitzuteilen und kann helfen, die Anzahl der Tab-Stops für Tastaturbenutzer zu reduzieren. Verwenden Sie die toolbar-Rolle nur, um drei oder mehr Steuerelemente zu gruppieren.

Die Toolbar ist normalerweise eine Teilmenge der Funktionen, die in einer menubar zu finden sind, um die Benutzeranstrengungen zu reduzieren. Wenn Sie mehr als eine Toolbar in einer Menüleiste haben, benötigt jede Toolbar eine Bezeichnung; diese können Sie mit aria-labelledby oder aria-label einfügen.

Wenn Sie eine Toolbar erstellen, müssen Sie das Fokusmanagement und die Tastaturinteraktionen innerhalb der Toolbar implementieren, insbesondere wenn dieselben Tastaturinteraktionen sowohl in der Toolbar als auch in den enthaltenen nativen Steuerelementen verwendet werden. Die Pfeiltasten Links und Rechts sollten verwendet werden, um zwischen den Steuerelementen innerhalb einer horizontalen Toolbar zu navigieren. Die Pfeiltasten Oben und Unten sollten verwendet werden, wenn die Toolbar vertikal ist — in welchem Fall Sie auch aria-orientation="vertical" einfügen möchten — oder können in einer horizontalen Toolbar reserviert werden, um Steuerelemente zu bedienen, wie Spin-Buttons, die vertikale Pfeiltasten zur Bedienung erfordern.

Vermeiden Sie die Aufnahme von Steuerelementen, deren Bedienung die für die Toolbar-Navigation verwendeten Pfeiltasten erfordert. Wenn Sie ein solches Steuerelement einfügen müssen, machen Sie es zum letzten Steuerelement in der Toolbar. Zum Beispiel könnte in einer horizontalen Toolbar ein Textfeld als letztes Element eingefügt werden.

Wenn eines der ansonsten interaktiven Elemente in der Toolbar vorübergehend deaktiviert ist, ziehen Sie in Betracht, sie fokussierbar zu lassen, damit Benutzer von Screenreadern auf ihre Anwesenheit aufmerksam gemacht werden können.

aria-orientation

Elemente mit der Rolle Toolbar haben einen impliziten aria-orientation-Wert von horizontal.

aria-labelledby / aria-label

Wenn die Toolbar eine sichtbare Beschriftung hat, referenzieren Sie diese mit dem aria-labelledby-Attribut per ID. Andernfalls geben Sie ein aria-label an. Wenn es mehr als eine Toolbar in einem Menü gibt, ist eine Benennung erforderlich.

Implementieren Sie das Fokusmanagement so, dass die Tastatur-Tab-Sequenz einen Stopp für die Toolbar enthält und die Pfeiltasten den Fokus zwischen den Steuerelementen innerhalb der Toolbar verschieben.

Tab und Shift + Tab

Bewegen Sie den Fokus in und aus der Toolbar. Wenn sich der Fokus in eine Toolbar bewegt:

• Wenn sich der Fokus erstmals in die Toolbar bewegt, wird der Fokus auf das erste Steuerelement gesetzt, das nicht deaktiviert ist.
• Wenn die Toolbar zuvor den Fokus enthielt, wird der Fokus optional auf das Steuerelement gesetzt, das zuletzt den Fokus hatte. Andernfalls wird er auf das erste Steuerelement gesetzt, das nicht deaktiviert ist.

Home (Optional)

Verschiebt den Fokus auf das erste Element.

End (Optional)

Verschiebt den Fokus auf das letzte Element.

Horizontale Toolbar

Elemente mit der Rolle Toolbar haben einen impliziten aria-orientation-Wert von horizontal. Wenn die Toolbar tatsächlich diese Orientierung hat, müssen folgende Tastaturinteraktionen implementiert werden:

Pfeil links (Für eine horizontale Toolbar (der Standard)

Verschiebt den Fokus auf das vorherige Steuerelement. Optional kann die Fokusbewegung von dem ersten Element auf das letzte Element springen.

Pfeil rechts (Für eine horizontale Toolbar (der Standard)

Verschiebt den Fokus auf das nächste Steuerelement. Optional kann die Fokusbewegung von dem letzten Element auf das erste Element springen.

In Toolbars mit mehreren Reihen von Steuerelementen erlauben Sie es den linken und rechten Pfeilen, von Reihe zu Reihe zu springen, und lassen die Möglichkeit, die vertikalen Pfeiltasten für die Bedienung von Steuerelementen zu reservieren, wie z.B. die Navigation zwischen Radioknöpfen oder die Erhöhung/Verringerung eines numerischen Spinners.

Vertikale Toolbar

Wenn die Toolbar vertikal ist, stellen Sie sicher, dass aria-orientation="vertical" gesetzt ist, und die folgenden Tastaturinteraktionen implementiert werden:

Pfeil nach unten (Für eine horizontale Toolbar (der Standard)

Verschiebt den Fokus auf das vorherige Steuerelement. Optional kann die Fokusbewegung von dem ersten Element auf das letzte Element springen.

Pfeil nach oben (Für eine horizontale Toolbar (der Standard)

Verschiebt den Fokus auf das nächste Steuerelement. Optional kann die Fokusbewegung von dem letzten Element auf das erste Element springen.

Implementieren Sie das Fokusmanagement so, dass die Tastatur-Tab-Sequenz einen Stopp für die Toolbar enthält und die Pfeiltasten den Fokus zwischen den Steuerelementen in der Toolbar verschieben. Beim Tabben in die Toolbar kehrt der Fokus zum Steuerelement zurück, das zuletzt den Fokus hatte.

Während das Toolbar-Element selbst keinen Fokus erhält, muss der Fokus auf die Bewegung hinein, heraus und innerhalb der Toolbar verwaltet werden. Beim Laden hat das erste Element in der Tab-Reihenfolge innerhalb der Toolbar tabindex="0" mit tabindex="-1" auf allen anderen fokussierbaren Elementen in der Toolbar. Abhängig von der [Tastaturinteraktion] wird das Element, das den Fokus erhält, auf tabindex="0" gesetzt, und das Element, das gerade den Fokus verloren hat, wird zurück auf tabindex="-1" gewechselt. Setzen Sie den Fokus mit element.focus() auf das Element, das tabindex="0" hat. Dies wird als "roving tabindex" bezeichnet. Ein Vorteil der Verwendung von roving tabindex zur Verwaltung des Fokus ist, dass der Browser das neu fokussierte Element in den Blick scrollen wird.

Wenn das Design verlangt, dass ein bestimmtes Element fokussiert wird, das nächste Mal, wenn der Benutzer den Fokus mit Tab oder Shift + Tab in die Toolbar bewegt, überprüfen Sie, ob dieses Ziel-Element tabindex="0" hat, wenn die Toolbar den Fokus verliert.

Sobald die Toolbar Fokus innerhalb hat, bieten Sie visuelle Hinweise. Wenn ein Element innerhalb der Toolbar Fokus hat, muss sowohl auf der Toolbar selbst - um die directionale Navigation mit den Pfeiltasten zu unterstützen - als auch auf dem Steuerelement, das Fokus hat, ein visueller Hinweis enthalten sein. Die CSS-Pseudoklassen von :focus und :focus-within können verwendet werden, um beide Elemente zu zielen.

Toolbar-Beispiel vom W3C, dem World Wide Web Consortium

Vermeiden Sie die Aufnahme von Steuerelementen, deren Bedienung die für die Toolbar-Navigation verwendeten Pfeiltasten erfordert (rechts und links Pfeile, oder oben und unten für vertikale Toolbars). Wenn Sie ein solches Steuerelement einfügen müssen, machen Sie es zum letzten Steuerelement in der Toolbar. Zum Beispiel könnte in einer horizontalen Toolbar ein Textfeld als letztes Element eingefügt werden.

Wenn eines der ansonsten interaktiven Elemente in der Toolbar deaktiviert ist, ziehen Sie in Betracht, sie fokussierbar zu lassen, damit Benutzer von Screenreadern auf ihre Anwesenheit aufmerksam gemacht werden können.

• Die CSS :focus Pseudoklasse
• Die CSS :focus-within Pseudoklasse