ARIA: menubar Rolle
Ein menubar
ist eine Darstellung von menu
, die normalerweise sichtbar bleibt und normalerweise horizontal präsentiert wird.
Beschreibung
Ein Menü ist ein Widget, das dem Benutzer eine Liste von Auswahlmöglichkeiten bietet, wie eine Reihe von Aktionen oder Funktionen. Der menubar
-Typ des Menüs wird normalerweise als eine dauerhaft sichtbare horizontale Befehlsleiste präsentiert. Menübalken verhalten sich wie native Menübalken von Betriebssystemen, wie die Menübalken mit Aufklappmenüs, die häufig oben in vielen Desktop-Anwendungsfenstern zu finden sind.
Die menubar
-Rolle wird verwendet, um eine Menüleiste zu erstellen, die denjenigen ähnelt, die sich in der Nähe des Fensters oben in vielen Desktop-Anwendungen befindet. Sie ist visuell beständig, typischerweise horizontal und bietet Benutzern schnellen Zugriff auf einen konsistenten Satz von Befehlen.
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 sein. Jedes Menüpunktelement muss den Fokus erhalten können, auch wenn es deaktiviert ist. Die group
- und separator
-Elemente sind jedoch nicht fokussierbar.
Ein Beispiel für einen nativen Menübalken ist der Balken, der möglicherweise oben auf dem Bildschirm erscheint, wenn Sie dies in einem Desktop-Browser lesen. Ein Beispiel für einen webbasierten Menübalken ist die horizontale Menüleiste, die "Datei Bearbeiten Ansicht Einfügen Format" usw. liest, die normalerweise unter dem Dokumentnamen in einem Google-Dokument sichtbar ist.
Menübalken-Interaktionen sollten ähnlich den typischen Menübalken-Interaktionen in einer grafischen Benutzeroberfläche eines Desktops sein. In Google Docs ist jedes dieser Menüpunkte ein menuitem
mit einem aufklappbaren Untermenü, daher ist jedes mit einem aria-haspopup
-Attribut versehen, das auf true
gesetzt ist. Das menubar
-Element selbst nicht.
Der Menübalken und alle Menüpunkte sind fokussierbar und haben ein tabindex-Attribut gesetzt. Wenn der Menübalken den Fokus durch Tabbing erhält, wird der Tastaturfokus auf das erste Menüpunktelement platziert. Jedes Element im Menü hat tabindex
auf -1
gesetzt, außer das erste Element, welches tabindex
auf 0
gesetzt hat.
Wenn ein Menübalken als Ergebnis einer Kontextaktion, wie einer Tastenkombination, den Fokus erhält, kann Escape oder Enter den Fokus zum auslösenden Kontext zurückbringen. Achten Sie jedoch darauf, keine Tastenkombinationen zu erstellen, die mit Benutzeragenten, Betriebssystemen oder Hilfstechniken in Konflikt stehen - mit jedem UA, OS oder AT.
Jedes Menüelement, egal wie tief verschachtelt, kann den Fokus erhalten, auch wenn es deaktiviert ist.
Wenn ein menubar
ein sichtbares Label hat, fügen Sie aria-labelledby
hinzu und setzen Sie es auf einen Wert, der das beschreibende Element referenziert. Andernfalls geben Sie dem Menübalken einen zugänglichen Namen, indem Sie ein beschreibendes aria-label
hinzufügen.
Ein menuitem
-Element in der menubar
kann ein Kind-Untermenü von Menüpunkten enthalten. Untermenüs können mehrfach tief verschachtelt sein. Allgemein ist der äußere Menübalken horizontal und alle Untermenüs sind vertikal. Wenn dies nicht der Fall ist, und Ihr Menübalken vertikal ist, fügen Sie aria-orientation="vertical"
dem menubar
-Element hinzu. Andernfalls ist dieses Attribut nicht erforderlich, da der Standardwert horizontal ist.
Verwandte WAI-ARIA Rollen, Zustände und Eigenschaften
group
Rolle-
Identifiziert eine Gruppe von Menüpunkten
-
Eine Option in einem Satz von Auswahlmöglichkeiten, die von einem
menubar
enthalten sind. Kann ein Untermenü haben. -
Ein aktivierbares Menüelement in einer Gruppe von Elementen mit derselben Rolle, von denen immer nur eines aktiv sein kann.
-
ein Menüelement mit einem aktivierbaren Zustand, dessen mögliche Werte
true
,false
odermixed
sind. aria-orientation
-
Fügen Sie
aria-orientation="vertical"
zummenubar
-Element hinzu, wenn es sich um einen vertikalen Menübalken handelt. Die Standardorientierung isthorizontal
.
Tastaturinteraktionen
Wenn sich der Fokus in einem menubar
befindet, liegt er immer auf einem Menüpunktelement innerhalb des Menübalkens. Wenn der Fokus auf einem obersten menuitem
in einem Menübalken liegt, müssen die folgenden Tastaturinteraktionen unterstützt werden:
- Pfeil nach unten
-
Wenn das aktuell fokussierte
menuitem
ein Untermenü hat, wird das Untermenü geöffnet und der Fokus auf das erste Element des Untermenüs gelegt. - Pfeil nach oben
-
(Optional) Wenn das aktuell fokussierte
menuitem
ein Untermenü hat, wird das Untermenü geöffnet und der Fokus auf das letzte Element des Untermenüs gelegt. - Pfeil nach rechts
-
Verschiebt den Fokus auf das nächste Element, optional von der letzten zur ersten umschaltend.
- Pfeil nach links
-
Verschiebt den Fokus auf das vorherige Element, optional von der ersten zur letzten umschaltend.
- Home
-
Wenn das Umschalten mit Pfeiltasten nicht unterstützt wird, bewegt sich der Fokus auf das erste Element in der
menubar
. - Ende
-
Wenn das Umschalten mit Pfeiltasten nicht unterstützt wird, verschiebt sich der Fokus auf das letzte Element in der
menubar
. - Tab
-
Verschiebt den Fokus auf das nächste Element in der Tab-Reihenfolge. Falls das dazu führt, dass der Menübalken verlassen wird, werden alle Untermenüs im Menübalken geschlossen.
- shift + Tab
-
Verschiebt den Fokus auf das vorherige Element in der Tab-Reihenfolge. Falls das dazu führt, dass der Menübalken verlassen wird, werden alle Untermenüs im Menübalken geschlossen.
Sehen Sie die menuitem
-Tastaturinteraktionen, menuitemradio
-Tastaturinteraktionen und menuitemcheckbox
-Tastaturinteraktionen für mehr Informationen zu Tastaturinteraktionen, wenn der Fokus auf einem Menüpunktelement in einem menubar
liegt (was er immer tut).
Hinweis: Die oben beschriebenen Interaktionen gehen davon aus, dass der menubar
horizontal ist. Wenn der menubar
vertikal ist, fügen Sie aria-orientation="vertical"
hinzu und ändern Sie die folgenden Tastaturtasten entsprechend:
- Pfeil nach unten
-
Verhält sich wie der Pfeil nach rechts wie oben beschrieben.
- Pfeil nach oben
-
Verhält sich wie der Pfeil nach links wie oben beschrieben.
- Pfeil nach rechts
-
Verhält sich wie der Pfeil nach unten wie oben beschrieben.
- Pfeil nach links
-
Verhält sich wie der Pfeil nach oben wie oben beschrieben.
Beispiele
Spezifikationen
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # menubar |
Unknown specification |