ARIA: menubar-Rolle
Ein menubar ist eine Darstellung eines menu, das normalerweise sichtbar bleibt und typischerweise horizontal präsentiert wird.
Beschreibung
Ein Menü ist ein Widget, das dem Benutzer eine Liste von Auswahlmöglichkeiten bietet, wie z.B. eine Reihe von Aktionen oder Funktionen. Der Menübartyp eines Menüs wird normalerweise als dauerhaft sichtbare horizontale Leiste von Befehlen dargestellt. Menübalken verhalten sich wie native Betriebssystem-Menübalken, wie die Menübalken mit Pull-Down-Menüs, die häufig oben in vielen Desktop-Anwendungsfenstern zu finden sind.
Die menubar-Rolle wird verwendet, um eine Menüleiste zu erstellen, die denen ähnelt, die sich in vielen Desktop-Anwendungen oberhalb des Fensters befinden, optisch dauerhaft, typischerweise horizontal, eine Leiste von Menüelementen, die dem Benutzer schnellen Zugriff auf eine konsistente Reihe von Befehlen bietet.
Ein menubar enthält drei Typen 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 den Fokus empfangen können muss, selbst wenn es deaktiviert ist, sind die group- und separator-Elemente nicht fokusierbar.
Ein Beispiel für eine native Menüleiste ist die Leiste, die möglicherweise oben auf dem Bildschirm vorhanden ist, wenn Sie dies in einem Desktop-Browser lesen. Ein Beispiel für eine webbasierte Menüleiste ist die horizontale Menüleiste, die "Datei Bearbeiten Ansicht Einfügen Format" usw. liest und die normalerweise unter dem Dokumentnamen in einem Google-Dokument sichtbar ist.
Menüleiste-Interaktionen sollten ähnlich wie die typischen Menüleiste-Interaktionen in einer Desktop-GUI sein. In Google Docs ist jedes dieser Menüelemente ein menuitem mit einem Popup-Untermenü, daher hat jedes das Attribut aria-haspopup auf true gesetzt. Das menubar-Element hat dies nicht.
Die Menüleiste und alle Menüelemente sind fokusierbar und haben ein tabindex-Attribut gesetzt. Wenn die Menüleiste den Fokus durch Tabben erhält, wird der Tastaturfokus auf das erste Menüelement gesetzt. Jedes Element im Menü hat tabindex auf -1 gesetzt, mit Ausnahme des ersten Elements, das seinen tabindex auf 0 gesetzt hat.
Wenn eine Menüleiste den Fokus als Ergebnis einer Kontextaktion erhält, beispielsweise durch eine Tastenkombination, kann Escape oder Enter den Fokus auf den aufrufenden Kontext zurücksetzen. Stellen Sie dabei sicher, dass keine Tastenkombinationen erstellt werden, die mit Benutzeragent, Betriebssystem oder assistiven Technologien in Konflikt geraten - also mit einem UA, OS oder AT.
Jedes Menüelement, egal wie tief verschachtelt, kann den Fokus empfangen, selbst wenn es deaktiviert ist.
Wenn ein menubar ein sichtbares Etikett hat, fügen Sie aria-labelledby hinzu, das auf einen Wert gesetzt ist, der auf das Etikettierungselement verweist. Andernfalls geben Sie der Menüleiste einen zugänglichen Namen, indem Sie ein beschreibendes aria-label hinzufügen.
Ein menuitem-Element in der menubar kann ein Untermenü von Menüelementen enthalten. Untermenüs können mehrere Ebenen tief verschachtelt werden. Im Allgemeinen ist die äußere menubar horizontal und alle Untermenüs sind vertikal. Wenn dies nicht der Fall ist, wenn Ihre Menüleiste vertikal ist, fügen Sie aria-orientation="vertical" dem menubar-Element hinzu. Andernfalls ist dieses Attribut nicht notwendig, da der Standardwert horizontal ist.
Zugehörige WAI-ARIA-Rollen, -Zustände und -Eigenschaften
groupRolle-
Identifiziert eine Gruppe von Menüelementen
-
Eine Option in einem Satz von Auswahlmöglichkeiten, die von einer
menubarenthalten sind. Kann ein Untermenü haben. -
Ein überprüfbares Menüelement in einer Gruppe von Elementen mit derselben Rolle, von denen nur eines gleichzeitig überprüft sein kann.
-
Ein Menüelement mit einem überprüfbaren Zustand, dessen mögliche Werte
true,falseodermixedsind. aria-orientation-
Fügen Sie
aria-orientation="vertical"demmenubar-Element hinzu, wenn es sich bei der Menüleiste um eine vertikale handelt. Die Standardausrichtung isthorizontal.
Tastaturinteraktionen
Wenn sich der Fokus in einer menubar befindet, liegt er immer auf einem Menüelement innerhalb der Menüleiste. Wenn sich der Fokus auf einem obersten menuitem in einer Menüleiste befindet, müssen die folgenden Tastaturinteraktionen unterstützt werden:
- Pfeil nach unten
-
Wenn das derzeit fokussierte
menuitemein Untermenü hat, öffnet es das Untermenü und platziert den Fokus auf das erste Element im Untermenü. - Pfeil nach oben
-
(Optional) Wenn das derzeit fokussierte
menuitemein Untermenü hat, öffnet es das Untermenü und platziert den Fokus auf das letzte Element im Untermenü. - Pfeil nach rechts
-
Verschiebt den Fokus auf das nächste Element, optional von letzter zu erster umschaltend.
- Pfeil nach links
-
Verschiebt den Fokus auf das vorherige Element, optional von erster zu letzter umschaltend.
- Start
-
Wenn das Umschalten mit Pfeiltasten nicht unterstützt wird, verschiebt es den Fokus auf das erste Element in der
menubar. - Ende
-
Wenn das Umschalten mit Pfeiltasten nicht unterstützt wird, verschiebt es den Fokus auf das letzte Element in der
menubar. - Tab
-
Verschiebt den Fokus auf das nächste Element in der Tabulator-Reihenfolge. Wenn dadurch die Menüleiste verlassen wird, werden alle Untermenüs in der Menüleiste geschlossen.
- Umschalt + Tab
-
Verschiebt den Fokus auf das vorherige Element in der Tabulator-Reihenfolge. Wenn dadurch die Menüleiste verlassen wird, werden alle Untermenüs in der Menüleiste geschlossen.
Siehe menuitem Tastaturinteraktionen, menuitemradio Tastaturinteraktionen, und menuitemcheckbox Tastaturinteraktionen für weitere Informationen zu Tastaturinteraktionen, wenn der Fokus auf ein Menüelement in einer Menüleiste gerichtet ist (was er immer ist).
Hinweis: Die obigen Interaktionen setzen voraus, dass die menubar horizontal ist. Wenn die menubar vertikal ist, fügen Sie aria-orientation="vertical" hinzu und ändern Sie die folgenden Tastaturtasten entsprechend:
- Pfeil nach unten
-
Verhält sich ähnlich wie der Pfeil nach rechts, wie oben beschrieben.
- Pfeil nach oben
-
Verhält sich ähnlich wie der Pfeil nach links, wie oben beschrieben.
- Pfeil nach rechts
-
Verhält sich ähnlich wie der Pfeil nach unten, wie oben beschrieben.
- Pfeil nach links
-
Verhält sich ähnlich wie der Pfeil nach oben, wie oben beschrieben.
Beispiele
Spezifikationen
| Spezifikation |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # menubar |
| Unknown specification |