ARIA: Rolle `menuitem`
Die Rolle menuitem
zeigt an, dass das Element eine Option in einer Reihe von Auswahlmöglichkeiten ist, die in einem menu
oder menubar
enthalten sind.
Beschreibung
Ein menuitem
ist einer der drei Arten von Optionen in einer Reihe von Auswahlmöglichkeiten, die durch ein menu
oder menubar
bereitgestellt werden. Die anderen beiden sind menuitemcheckbox
und menuitemradio
. Das menuitem
wird nur als Nachfahre von oder im Besitz von Elementen mit der Rolle menu
oder menubar
gefunden, optional verschachtelt innerhalb eines Elements mit der Rolle group
, das in einem Menü enthalten oder von einem Menü besessen ist.
Wenn das menuitem
kein Nachfahre eines Menüs im DOM ist, fügen Sie das Attribut aria-owns
dem Menü hinzu, um die Beziehung anzuzeigen. Wenn aria-owns
auf dem Menücontainer gesetzt ist, um Elemente einzubeziehen, die keine DOM-Kinder des Containers sind, erscheinen diese Elemente in der Leseordnung 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 Leseordnung der unterstützenden Technologie übereinstimmt.
Jedes menuitem
in einem Menü ist fokussierbar, unabhängig davon, ob es deaktiviert ist oder nicht. Ein menuitem
wird als deaktiviert angezeigt, indem aria-disabled="true"
auf dem Element mit der Rolle gesetzt wird.
Wenn ein menuitem
über ein Untermenü verfügt, programmieren Sie es so, dass ein neues Untermenü angezeigt wird, wenn der Menüpunkt aktiviert wird, und fügen Sie aria-haspopup="menu"
oder den Wert true
hinzu, um unterstützenden Technologien anzuzeigen, dass das menuitem
verwendet wird, um ein Untermenü zu öffnen.
Eine häufige Konvention, um anzuzeigen, dass ein menuitem
ein Dialogfeld öffnet, besteht darin, dem Menüpunkt-Etikett "…" (Ellipse) hinzuzufügen, z.B. "Speichern unter …".
Jedes menuitem
muss einen zugänglichen Namen haben. Dieser Name stammt standardmäßig aus dem Inhalt des Elements. Wenn der Inhalt keinen nützlichen zugänglichen Namen bietet, kann aria-labelledby
verwendet werden, um ein sichtbares Etikett zu referenzieren. Wenn kein sichtbarer Inhalt verfügbar ist, 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 bereitstellt. Erforderliche Kontextrolle (oder
menubar
) -
Eine Präsentation eines
menu
, das normalerweise sichtbar bleibt und normalerweise horizontal dargestellt wird. Erforderliche Kontextrolle (odermenu
) group
Rolle-
Kann verwendet werden, um eine Gruppe verwandter
menuitem
s innerhalb einesmenu
odermenubar
oder im Besitz eines solchen zu identifizieren. aria-disabled
-
Gibt an, dass das Element wahrnehmbar, aber deaktiviert ist und daher nicht bedienbar ist
aria-haspopup
-
Gibt die Verfügbarkeit und den Typ eines interaktiven Popup an, das durch das
menuitem
ausgelöst werden kann
Tastaturinteraktionen
- Enter und Leertaste
-
Wenn das
menuitem
ein Untermenü hat, öffnet es das Untermenü und platziert den Fokus auf dessen erstem Element. Andernfalls wird das Element aktiviert und das Menü geschlossen. - Pfeil nach unten
-
Bei einem
menuitem
, das in einemmenubar
ein Untermenü hat, öffnet es das Untermenü und platziert den Fokus auf das erste Element im Untermenü. Andernfalls wird der Fokus auf das nächste Element verschoben, wobei optional vom letzten zum ersten Element umbrochen wird. - Pfeil nach oben
-
Verschiebt den Fokus auf das vorherige Element, wobei optional vom ersten zum letzten Element umbrochen wird. Optional, wenn das
menuitem
sich in einem menubar befindet und ein Untermenü hat, öffnet es das Untermenü und platziert den Fokus auf das letzte Element im Untermenü. - Pfeil nach rechts
-
Wenn in einem
menu
, das mit einem menubutton geöffnet wurde und sich nicht in einemmenubar
befindet, und der Menüpunkt kein Untermenü hat, passiert nichts. Wenn der Fokus in einemmenubar
ist, wird der Fokus auf das nächste Element verschoben, wobei optional vom letzten zum ersten umbrochen wird. Wenn der Fokus in einemmenu
ist und auf einemmenuitem
, das ein Untermenü hat, wird das Untermenü geöffnet und der Fokus auf dessen erstes Element platziert. Wenn der Fokus in einemmenu
ist und auf einem Element, das kein Untermenü hat, wird das Untermenü und alle übergeordneten Menüs geschlossen, der Fokus auf das nächste Element in dermenubar
verschoben und, wenn der Fokus jetzt auf einemmenuitem
mit einem Untermenü ist, wird entweder das Untermenü diesesmenuitem
geöffnet, ohne den Fokus in das Untermenü zu verschieben, oder das Untermenü diesesmenuitem
wird geöffnet und der Fokus auf das erste Element im Untermenü platziert. - Pfeil nach links
-
Wenn der Fokus in einem
menubar
ist, wird der Fokus auf das vorherige Element verschoben, wobei optional vom ersten zum letzten umbrochen wird. Wenn der Fokus in einem Untermenü eines Elements in einemmenu
ist, wird das Untermenü geschlossen und der Fokus auf das übergeordnetemenuitem
zurückgesetzt. Wenn der Fokus in einem Untermenü eines Elements in einemmenubar
ist, wird das Untermenü geschlossen, der Fokus auf das vorherige Element in dermenubar
verschoben und, wenn der Fokus jetzt auf einemmenuitem
mit einem Untermenü ist, wird entweder das Untermenü diesesmenuitem
geöffnet, ohne den Fokus in das Untermenü zu verschieben, oder das Untermenü diesesmenuitem
wird geöffnet und der Fokus auf das erste Element im Untermenü platziert. - Home
-
Wenn das Pfeiltastenumbruch nicht unterstützt wird, wird der Fokus auf das erste Element im aktuellen
menu
odermenubar
verschoben. - Ende
-
Wenn das Pfeiltastenumbruch nicht unterstützt wird, wird der Fokus auf das letzte Element im aktuellen
menu
odermenubar
verschoben. - Jede Taste, die einem druckbaren Zeichen entspricht (Optional)
-
Verschiebt den Fokus auf das nächste Element im aktuellen Menü, dessen Etikett mit diesem druckbaren Zeichen beginnt.
- Escape
-
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 dem aus das Menü geöffnet wurde. - Tab
-
Verschiebt den Fokus auf das nächste Element in der Tabuatsequenz, und wenn das Element, das den Fokus hatte, sich nicht in einem menubar befindet, schließt es sein Menü und alle geöffneten übergeordneten Menücontainer.
- Shift + Tab
-
Verschiebt den Fokus auf das vorherige Element in der Tabuatsequenz, und wenn das Element, das den Fokus hatte, sich nicht in einem menubar befindet, schließt es sein Menü und alle geöffneten übergeordneten Menücontainer.
Wenn ein Menü geöffnet wird oder eine Menüleiste den Fokus als Ergebnis einer Kontextaktion erhält, kann Escape oder Enter den Fokus auf den aufrufenden Kontext zurückbringen.
Einige Implementierungen von Navigationsmenüleisten können menuitem
-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 mit diesem Menüelement verknüpfte Untermenü öffnet.
Wenn Elemente in einer menubar
vertikal angeordnet sind und Elemente in Menücontainern horizontal angeordnet sind, funktioniert Pfeil nach unten wie oben für Pfeil nach rechts beschrieben, Pfeil nach oben funktioniert 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 |