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 (oder menu)

group Rolle

Kann verwendet werden, um eine Gruppe verwandter menuitems innerhalb eines menus oder menubars 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 einem menubar 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 einem menubar befindet und das menuitem kein Untermenü hat, tut es nichts. Wenn der Fokus in einem menubar ist, verschiebt sich der Fokus zum nächsten Element, wobei optional vom letzten zum ersten gewickelt wird. Wenn der Fokus in einem menu und auf einem menuitem ist, das ein Untermenü hat, öffnet er das Untermenü und bringt den Fokus auf dessen erstes Element. Wenn der Fokus in einem menu 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 im menubar, und wenn der Fokus jetzt auf einem menuitem mit einem Untermenü ist, öffnet er entweder das Untermenü dieses menuitems ohne den Fokus in das Untermenü zu verschieben, oder öffnet das Untermenü dieses menuitems und bringt den Fokus auf das erste Element im Untermenü.

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 übergeordneten menuitem. Wenn der Fokus in einem Untermenü eines Elements in einem menubar liegt, schließt er das Untermenü, verschiebt den Fokus zum vorherigen Element im menubar, und wenn der Fokus jetzt auf einem menuitem mit einem Untermenü liegt, öffnet er entweder das Untermenü dieses menuitems ohne den Fokus in das Untermenü zu verschieben, oder öffnet das Untermenü dieses menuitems 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 oder menubar.

Ende

Wenn das Umschließen von Pfeiltasten nicht unterstützt wird, verschiebt er den Fokus auf das letzte Element im aktuellen menu oder menubar.

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

html
<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

Siehe auch