ARIA: menubar Rolle

Ein Menü ist ein Widget, das dem Benutzer eine Liste von Auswahlmöglichkeiten bietet, wie zum Beispiel eine Reihe von Aktionen oder Funktionen. Der Menübartyp des Menüs wird normalerweise als eine dauerhaft sichtbare horizontale Befehlsleiste präsentiert. Menübalken verhalten sich wie native Menübalken von Betriebssystemen, wie z.B. die Menübalken mit Dropdown-Menüs, die häufig am oberen Rand von Fenstern vieler Desktop-Anwendungen zu finden sind.

Die Rolle menubar wird verwendet, um eine Menüleiste zu erstellen, die denjenigen ähnlich ist, die sich in vielen Desktop-Anwendungen am oberen Rand des Fensters befinden, visuell persistent und typischerweise horizontal ist und eine Leiste von Menüelementen bietet, die dem Benutzer schnellen Zugriff auf eine konsistente Menge von Befehlen geben.

Ein menubar enthält drei Arten von Menüelementen, einschließlich menuitem, menuitemradio und menuitemcheckbox. Diese Menüelemente können optional in einem oder mehreren group-Containern verschachtelt sein. Gruppen oder Elemente können optional durch separator-Elemente getrennt werden. Während jedes Menüelement fokussierbar sein muss, auch wenn es deaktiviert ist, sind die Elemente group und separator nicht fokussierbar.

Ein Beispiel für einen nativen Menübalken ist die Leiste, die möglicherweise am oberen Bildschirmrand vorhanden ist, wenn Sie dies in einem Desktop-Browser lesen. Ein Beispiel für einen web-basierten Menübalken ist die horizontale Menüleiste mit "Datei Bearbeiten Ansicht Einfügen Format" etc., die normalerweise unter dem Dokumentnamen in einem Google-Dokument sichtbar ist.

Menübalken-Interaktionen sollten den typischen Menüleisten-Interaktionen in einer Desktop-Grafikbenutzeroberfläche ähneln. In Google Docs ist jedes dieser Menüelemente ein menuitem mit einem Popup-Untermenü, sodass jedem das Attribut aria-haspopup auf true gesetzt ist. Das menubar-Element hat dies nicht.

Der Menübalken und alle Menüelemente sind fokussierbar und haben ein tabindex-Attribut gesetzt. Wenn der Menübalken durch Tabben den Fokus erhält, wird der Tastaturfokus auf das erste menuitem platziert. Jedes Element im Menü hat tabindex auf -1 gesetzt, außer das erste Element, das tabindex auf 0 gesetzt hat.

Wenn ein Menübalken den Fokus als Ergebnis einer Kontextaktion erhält, wie z.B. eine Tastenkombination, kann Escape oder Enter den Fokus auf den aufrufenden Kontext zurückführen. Dennoch sollte darauf geachtet werden, keine Tastenkombinationen zu erstellen, die mit Benutzeragenten, Betriebssystemen oder unterstützenden Technologien in Konflikt stehen - jeder UA, OS oder AT.

Jedes Menüelement, egal wie tief verschachtelt, kann fokussiert werden, auch wenn es deaktiviert ist.

Wenn ein menubar ein sichtbares Label hat, fügen Sie aria-labelledby hinzu, das auf ein Element verweist, das das Label beschreibt. Andernfalls geben Sie dem Menübalken einen zugänglichen Namen, indem Sie ein beschreibendes aria-label hinzufügen.

Ein menuitem-Element im menubar kann ein untergeordnetes Untermenü von Menüelementen enthalten. Untermenüs können mehrfach verschachtelt werden. Im Allgemeinen ist der äußere menubar horizontal und alle Untermenüs sind vertikal. Wenn dies nicht der Fall ist, wenn Ihr Menübalken vertikal ist, fügen Sie aria-orientation="vertical" auf dem menubar-Element hinzu. Andernfalls ist dieses Attribut nicht notwendig, da der Standardwert horizontal ist.

group Rolle

Identifiziert eine Gruppe von Menüelementen

menuitem Rolle

Eine Option in einer Auswahlmenge, die von einem menubar enthalten ist. Kann ein Untermenü haben.

menuitemradio Rolle

Ein auswählbares Menüelement in einer Gruppe von Elementen mit derselben Rolle, von denen nur eines gleichzeitig ausgewählt werden kann.

menuitemcheckbox Rolle

Ein Menüelement mit einem auswählbaren Zustand, dessen mögliche Werte true, false oder mixed sind.

aria-orientation

Fügen Sie aria-orientation="vertical" auf dem menubar-Element hinzu, wenn der Menübalken vertikal ist. Die Standardorientierung ist horizontal.

Wenn der Fokus in einem menubar ist, befindet er sich immer auf einem Menüelement innerhalb des Menübalkens. Wenn der Fokus auf einem menuitem der obersten Ebene in einem Menübalken liegt, müssen die folgenden Tastaturinteraktionen unterstützt werden:

Nach-unten-Taste

Wenn das aktuell fokussierte menuitem ein Untermenü hat, öffnet es das Untermenü und platziert den Fokus auf das erste Element im Untermenü.

Nach-oben-Taste

(Optional) Wenn das aktuell fokussierte menuitem ein Untermenü hat, öffnet es das Untermenü und platziert den Fokus auf das letzte Element im Untermenü.

Nach-rechts-Taste

Verschiebt den Fokus auf das nächste Element, optional mit Umbruch vom letzten zum ersten.

Nach-links-Taste

Verschiebt den Fokus auf das vorherige Element, optional mit Umbruch vom ersten zum letzten.

Home

Wenn Pfeiltasten-Umbruch nicht unterstützt wird, verschiebt er den Fokus auf das erste Element im menubar.

Ende

Wenn Pfeiltasten-Umbruch nicht unterstützt wird, verschiebt er den Fokus auf das letzte Element im menubar.

Tab

Verschiebt den Fokus auf das nächste Element in der Tab-Reihenfolge. Wenn dies den Menübalken verlässt, werden alle Untermenüs im Menübalken geschlossen.

Shift + Tab

Verschiebt den Fokus auf das vorherige Element in der Tab-Reihenfolge. Wenn dies den Menübalken verlässt, werden alle Untermenüs im Menübalken geschlossen.

Siehe Tastaturinteraktionen menuitem, Tastaturinteraktionen menuitemradio und Tastaturinteraktionen menuitemcheckbox für weitere Informationen zu Tastaturinteraktionen, wenn der Fokus auf einem Menüelement in einem Menübalken liegt (was er immer ist).

Hinweis: Die obigen Interaktionen nehmen an, dass der menubar horizontal ist. Wenn der menubar vertikal ist, fügen Sie aria-orientation="vertical" hinzu und ändern Sie die folgenden Tastaturtasten entsprechend:

Nach-unten-Taste

Funktioniert wie die oben beschriebene Nach-rechts-Taste.

Nach-oben-Taste

Funktioniert wie die oben beschriebene Nach-links-Taste.

Nach-rechts-Taste

Funktioniert wie die oben beschriebene Nach-unten-Taste.

Nach-links-Taste

Funktioniert wie die oben beschriebene Nach-oben-Taste.

• W3C WAI-ARIA-Praktiken: Navigations-menubar-Beispiel
• W3C WAI-ARIA-Praktiken: Editor-menubar-Beispiel

• toolbar Rolle