ARIA: Rolle `menuitem`

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

menu Rolle

Ein Widget, das eine Liste von Auswahlmöglichkeiten bereitstellt. Erforderliche Kontextrolle (oder menubar)

menubar Rolle

Eine Präsentation eines menu, das normalerweise sichtbar bleibt und normalerweise horizontal dargestellt wird. Erforderliche Kontextrolle (oder menu)

group Rolle

Kann verwendet werden, um eine Gruppe verwandter menuitems innerhalb eines menu oder menubar 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 einem menubar 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 einem menubar befindet, und der Menüpunkt kein Untermenü hat, passiert nichts. Wenn der Fokus in einem menubar ist, wird der Fokus auf das nächste Element verschoben, wobei optional vom letzten zum ersten umbrochen wird. Wenn der Fokus in einem menu ist und auf einem menuitem, das ein Untermenü hat, wird das Untermenü geöffnet und der Fokus auf dessen erstes Element platziert. Wenn der Fokus in einem menu 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 der menubar verschoben und, wenn der Fokus jetzt auf einem menuitem mit einem Untermenü ist, wird entweder das Untermenü dieses menuitem geöffnet, ohne den Fokus in das Untermenü zu verschieben, oder das Untermenü dieses menuitem 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 einem menu ist, wird das Untermenü geschlossen und der Fokus auf das übergeordnete menuitem zurückgesetzt. Wenn der Fokus in einem Untermenü eines Elements in einem menubar ist, wird das Untermenü geschlossen, der Fokus auf das vorherige Element in der menubar verschoben und, wenn der Fokus jetzt auf einem menuitem mit einem Untermenü ist, wird entweder das Untermenü dieses menuitem geöffnet, ohne den Fokus in das Untermenü zu verschieben, oder das Untermenü dieses menuitem 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 oder menubar verschoben.

Ende

Wenn das Pfeiltastenumbruch nicht unterstützt wird, wird der Fokus auf das letzte Element im aktuellen menu oder menubar 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

Siehe auch

• menuitemcheckbox Rolle
• menuitemradio Rolle
• listitem Rolle
• option Rolle