ARIA: menuitem-Rolle
Die menuitem
-Rolle zeigt an, dass das Element eine Option in einem Satz von Auswahlmöglichkeiten ist, die von einem menu
oder menubar
enthalten werden.
Beschreibung
Ein menuitem
ist eine der drei Arten von Optionen in einem Satz von Auswahlmöglichkeiten, die von einem menu
oder menubar
enthalten werden; die anderen beiden sind menuitemcheckbox
und menuitemradio
. Das menuitem
ist nur als Nachfahre von oder wird von Elementen mit der Rolle menu
oder menubar
besessen, optional verschachtelt in einem Element mit der Rolle group
, das in einem Menü enthalten ist oder von diesem besessen wird.
Wenn das menuitem
im DOM kein Nachfahre eines Menüs ist, fügen Sie das Attribut aria-owns
im Menü hinzu, um die Beziehung anzuzeigen. Wenn aria-owns
auf das Menücontainer gesetzt ist, um Elemente einzuschließen, die keine DOM-Kinder des Containers sind, erscheinen diese Elemente in der Lesereihenfolge in der Reihenfolge, in der sie referenziert werden, und nach allen Elementen, die DOM-Kinder sind, in unterstützenden Technologien. Stellen Sie sicher, dass die visuelle Fokusreihenfolge mit der Lesereihenfolge der unterstützenden Technologie übereinstimmt.
Jedes menuitem
in einem Menü ist fokussierbar, unabhängig davon, ob es deaktiviert ist oder nicht. Geben Sie an, dass ein menuitem
deaktiviert ist, indem Sie aria-disabled="true"
auf dem Element mit der Rolle setzen.
Wenn ein menuitem
ein Untermenü hat, programmieren Sie es so, dass ein neues Untermenü angezeigt wird, wenn das Menüpunkts aktiviert wird, und fügen Sie aria-haspopup="menu"
oder den Wert true
hinzu, um unterstützenden Technologien mitzuteilen, dass der Menüpunkt zum Öffnen eines Untermenüs verwendet wird.
Eine übliche Konvention zur Anzeige, dass ein menuitem
ein Dialogfeld öffnet, ist das Anhängen von "…" (Auslassungszeichen) an das Menüpunkt-Label, z.B. "Speichern unter …".
Jedes menuitem
muss einen zugänglichen Namen haben. Dieser Name stammt standardmäßig aus den Inhalten des Elements. Wenn die Inhalte keinen nützlichen zugänglichen Namen bieten, können aria-labelledby
verwendet werden, um eine sichtbare Beschriftung zu referenzieren. Wenn keine sichtbaren Inhalte verfügbar sind, um den zugänglichen Namen bereitzustellen, kann ein zugänglicher Name mit aria-label
bereitgestellt werden.
Zugehörige WAI-ARIA-Rollen, Zustände und Eigenschaften
-
Ein Widget, das eine Liste von Auswahlmöglichkeiten bietet. Erforderliche Kontextrolle (oder
menubar
) -
Eine Darstellung eines
menu
, das normalerweise sichtbar bleibt und in der Regel horizontal präsentiert wird. Erforderliche Kontextrolle (odermenu
) group
Rolle-
Kann verwendet werden, um eine Gruppe verwandter
menuitem
s innerhalb einesmenu
s odermenubar
s oder die von diesem besessen werden, zu identifizieren aria-disabled
-
Gibt an, dass das Element wahrnehmbar, aber deaktiviert ist, sodass es nicht bedienbar ist
aria-haspopup
-
Gibt die Verfügbarkeit und Art des interaktiven Popup-Fensters an, das durch das
menuitem
ausgelöst werden kann
Tastaturinteraktionen
- Enter und Leertaste
-
Wenn das
menuitem
ein Untermenü hat, öffnet es das Untermenü und bringt den Fokus auf dessen erstes Element. Andernfalls aktiviert es das Element und schließt das Menü. - Pfeil nach unten
-
Bei einem
menuitem
, das ein Untermenü in einemmenubar
hat, öffnet es das Untermenü und bringt den Fokus auf das erste Element im Untermenü. Andernfalls verschiebt es den Fokus zum nächsten Element, wobei optional vom letzten zum ersten Element gewickelt wird. - Pfeil nach oben
-
Verschiebt den Fokus zum vorherigen Element, wobei optional vom ersten zum letzten Element gewickelt wird. Optional, wenn das
menuitem
in einem menubar ist und ein Untermenü hat, öffnet es das Untermenü und bringt den Fokus auf das letzte Element im Untermenü. - Pfeil nach rechts
-
Wenn es sich in einem
menu
, das mit einem menubutton geöffnet wurde, und nicht in einemmenubar
befindet und dasmenuitem
kein Untermenü hat, tut es nichts. Wenn der Fokus in einemmenubar
ist, verschiebt sich der Fokus zum nächsten Element, wobei optional vom letzten zum ersten gewickelt wird. Wenn der Fokus in einemmenu
und auf einemmenuitem
ist, das ein Untermenü hat, öffnet er das Untermenü und bringt den Fokus auf dessen erstes Element. Wenn der Fokus in einemmenu
und auf einem Element ist, das kein Untermenü hat, schließt er das Untermenü und alle übergeordneten Menüs, verschiebt den Fokus zum nächsten Element immenubar
, und wenn der Fokus jetzt auf einemmenuitem
mit einem Untermenü ist, öffnet er entweder das Untermenü diesesmenuitem
s ohne den Fokus in das Untermenü zu verschieben, oder öffnet das Untermenü diesesmenuitem
s und bringt den Fokus auf das erste Element im Untermenü. - Pfeil nach links
-
Wenn der Fokus in einem
menubar
liegt, verschiebt sich der Fokus zum vorherigen Element, wobei optional vom ersten zum letzten gewickelt wird. Wenn der Fokus in einem Untermenü eines Elements in einem Menü liegt, schließt er das Untermenü und bringt den Fokus zurück zum übergeordnetenmenuitem
. Wenn der Fokus in einem Untermenü eines Elements in einemmenubar
liegt, schließt er das Untermenü, verschiebt den Fokus zum vorherigen Element immenubar
, und wenn der Fokus jetzt auf einemmenuitem
mit einem Untermenü liegt, öffnet er entweder das Untermenü diesesmenuitem
s ohne den Fokus in das Untermenü zu verschieben, oder öffnet das Untermenü diesesmenuitem
s und bringt den Fokus auf das erste Element im Untermenü. - Home
-
Wenn das Umschließen von Pfeiltasten nicht unterstützt wird, verschiebt er den Fokus auf das erste Element im aktuellen
menu
odermenubar
. - Ende
-
Wenn das Umschließen von Pfeiltasten nicht unterstützt wird, verschiebt er den Fokus auf das letzte Element im aktuellen
menu
odermenubar
. - Jede Taste, die einem druckbaren Zeichen entspricht (Optional)
-
Verschiebt den Fokus auf das nächste Element im aktuellen Menü, dessen Beschriftung mit diesem druckbaren Zeichen beginnt.
- Esc
-
Schließt das Menü, das den Fokus enthält und gibt den Fokus an das Element oder den Kontext zurück, z.B. Menütaste oder übergeordnetes
menuitem
, von denen das Menü geöffnet wurde. - Tab
-
Verschiebt den Fokus zum nächsten Element in der Tabulatorreihenfolge, und wenn das Element, das den Fokus hatte, nicht in einem menubar ist, schließt es das Menü und alle offenen übergeordneten Menükontainer.
- Umschalt + Tab
-
Verschiebt den Fokus zum vorherigen Element in der Tabulatorreihenfolge, und wenn das Element, das den Fokus hatte, nicht in einem menubar ist, schließt es das Menü und alle offenen übergeordneten Menükontainer.
Wenn ein Menü geöffnet wird oder eine Menüleiste den Fokus als Ergebnis einer Kontextaktion erhält, können Esc oder Enter den Fokus auf den aufrufenden Kontext zurückführen.
Einige Implementierungen von Navigations-Menüleisten können Menüpunkt-Elemente haben, die sowohl eine Funktion ausführen als auch ein Untermenü öffnen. In solchen Implementierungen führen Enter und Leertaste eine Navigationsfunktion aus, während Pfeil nach unten in einer horizontalen Menüleiste das Untermenü öffnet, das mit demselben Menüpunkt verknüpft ist.
Wenn Elemente in einem menubar
vertikal angeordnet sind und Elemente in Menücontainern horizontal angeordnet sind, fungiert Pfeil nach unten wie oben für Pfeil nach rechts beschrieben, Pfeil nach oben fungiert wie oben für Pfeil nach links beschrieben und umgekehrt.
Beispiele
<div>
<button id="menubutton" aria-haspopup="true" aria-controls="menu">
<img src="hamburger.svg" alt="Page Sections" />
</button>
<ul id="menu" role="menu" aria-labelledby="menubutton">
<li role="presentation">
<a role="menuitem" href="#description">Description</a>
</li>
<li role="presentation">
<a
role="menuitem"
href="#associated_wai-aria_roles_states_and_properties">
Associated WAI-ARIA roles, states, and properties
</a>
</li>
<li role="presentation">
<a role="menuitem" href="#keyboard_interactions">
Keyboard interactions
</a>
</li>
<li role="presentation">
<a role="menuitem" href="#examples">Examples</a>
</li>
<li role="presentation">
<a role="menuitem" href="#specifications">Specifications</a>
</li>
<li role="presentation">
<a role="menuitem" href="#see_also">See Also</a>
</li>
</ul>
</div>
Spezifikationen
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # menuitem |
Unknown specification |