Die Rollemenu ist eine Art zusammengesetztes Widget, das dem Benutzer eine Liste von Auswahlmöglichkeiten bietet.

Beschreibung

Einmenu stellt im Allgemeinen eine Gruppierung von häufigen Aktionen oder Funktionen dar, die der Benutzer ausführen kann. Die Rollemenu ist angebracht, wenn eine Liste von Menüelementen auf eine Weise präsentiert wird, die einem Menü in einer Desktop-Anwendung ähnelt. Untermenüs, auch als Pop-up-Menüs bekannt, haben ebenfalls die Rollemenu.

Während der Begriff "Menü" generisch verwendet wird, um die Navigation auf Websites zu beschreiben, ist die Rollemenu für eine Liste von Aktionen oder Funktionen vorgesehen, die komplexe Funktionalitäten erfordern, wie z.B. das Fokusmanagement innerhalb eines zusammengesetzten Widgets und Navigation anhand des ersten Zeichens.

Ein Menü kann eine dauerhaft sichtbare Liste von Steuerungen oder ein Widget sein, das geöffnet und geschlossen werden kann. Ein geschlossenesmenu-Widget wird normalerweise durch das Aktivieren eines Menüknopfs, das Auswählen eines Menüelements, das ein Untermenü öffnet, oder durch das Ausführen eines Befehls, wie z.B.Shift + F10 in Windows, das ein kontextabhängiges Menü öffnet, sichtbar gemacht.

Wenn ein Benutzer eine Auswahl in einem geöffneten Menü aktiviert, schließt sich das Menü normalerweise. Wenn die Auswahl ein Untermenü aufruft, bleibt das Menü geöffnet und das Untermenü wird angezeigt.

Wenn ein Menü geöffnet wird, wird der Tastaturfokus auf das erste Menüelement gelegt. Um tastaturzugänglich zu sein, müssen Sie denFokus verwalten für alle Nachkommen: Alle Menüelemente innerhalb desmenu müssen fokussierbar sein. Der Menüknopf, der das Menü öffnet, und die Menüpunkte, nicht aber das Menü selbst, sind die fokussierbaren Elemente.

Menüpunkte umfassenmenuitem,menuitemcheckbox undmenuitemradio.Deaktivierte Menüpunkte sind fokussierbar, können jedoch nicht aktiviert werden.

Menüpunkte können in Elementen mit der Rollegroup gruppiert und durch Elemente mit der Rolleseparator getrennt werden. Wedergroup nochseparator erhalten den Fokus oder sind interaktiv.

Wenn einmenu infolge einer Kontextaktion geöffnet wird, kannEscape oderEnter den Fokus auf den aufrufenden Kontext zurückstellen. Wenn der Fokus auf dem Menüknopf war, öffnetEnter das Menü und setzt den Fokus auf das erste Menüelement. Wenn der Fokus auf dem Menü selbst liegt, schließtEscape das Menü und setzt den Fokus auf den Menüknopf oder das Eltern-Menüleisten-Element (oder die Kontextaktion, die das Menü geöffnet hat) zurück.

Elemente mit der Rollemenu haben einen impliziten Wert vonaria-orientation mitvertical. Für horizontal ausgerichtete Menüs verwenden Siearia-orientation="horizontal".

Wenn das Menü visuell dauerhaft ist, ziehen Sie stattdessen die Rollemenubar in Betracht.

Zugehörige WAI-ARIA-Rollen, -Zustände und -Eigenschaften

Rollenmenuitem,menuitemcheckbox undmenuitemradio

Rollen von Elementen in einem enthaltenenmenu odermenubar, die gemeinsam als "Menüelemente" bekannt sind. Diese müssen fokussierbar sein.

Rollegroup

Menüpunkte können in einemgroup verschachtelt werden.

Rolleseparator

Ein Trenner, der Abschnitte des Inhalts oder Gruppen von Menüpunkten innerhalb des Menüs voneinander trennt und unterscheidet.

Attributtabindex

Dermenu-Container hattabindex auf-1 oder0 gesetzt, und jedes Element im Menü hattabindex auf-1 gesetzt.

aria-activedescendant

Auf die ID des fokussierten Elements gesetzt, falls vorhanden.

aria-orientation

Gibt an, ob die Menüorientierung horizontal oder vertikal ist; entfällt es, ist der Standardwertvertikal.

aria-label oderaria-labelledby

Dasmenu muss einen zugänglichen Namen haben. Verwenden Siearia-labelledby, wenn ein sichtbares Label vorhanden ist, andernfalls verwenden Siearia-label. Entweder dasaria-labelledby-Set auf eineid desmenuitem oderbutton, das seine Anzeige steuert, oderaria-label, um das Label zu definieren.

aria-owns

Nur auf den Menücontainer setzen, um Elemente einzubeziehen, die keine DOM-Kinder des Containers sind. Wenn gesetzt, erscheinen diese Elemente in der Leseordnung in der Reihenfolge, in der sie referenziert werden, und nach allen Elementen, die DOM-Kinder sind. Beim Fokusmanagement sicherstellen, dass die visuelle Fokus-Reihenfolge mit dieser assistiven Technologie-Leseordnung übereinstimmt.

Tastaturinteraktionen

Leerzeichen /Enter

Wenn das Element ein übergeordnetes Menüelement ist, öffnet es das Untermenü und verschiebt den Fokus auf das erste Element im Untermenü. Andernfalls aktiviert es das Menüelement, das neuen Inhalt lädt und den Fokus auf die Überschrift setzt, die den Inhalt bezeichnet.

Escape

Wenn sich in einem Untermenü, schließt das Untermenü und verschiebt den Fokus auf das übergeordnete Menü- oder Menüleisten-Element.

Pfeil nach rechts

In einer Menüleiste verschiebt sich der Fokus auf das nächste Element in der Menüleiste. Wenn der Fokus auf dem letzten Element ist, verschiebt es den Fokus auf das erste Element. Wenn sich in einem Untermenü befindet, wenn der Fokus auf einem Element ist, das kein Untermenü hat, schließt es das Untermenü und verschiebt den Fokus auf das nächste Element in der Menüleiste. Andernfalls öffnet es das Untermenü des neu fokussierten Menüleisten-Elements und hält den Fokus auf diesem übergeordneten Menüleisten-Element. Wenn nicht in einer Menüleiste oder einem Untermenü und nicht auf einemmenuitem mit einem Untermenü, wenn der Fokus nicht das letzte fokussierbare Element im Menü ist, verschiebt es optional den Fokus auf das nächste fokussierbare Element.

Pfeil nach links

Verschiebt den Fokus auf das vorherige Element in der Menüleiste. Wenn der Fokus auf dem ersten Element liegt, verschiebt er den Fokus auf das letzte Element. Wenn sich in einem Untermenü befindet, schließt er das Untermenü und verschiebt den Fokus auf das übergeordnete Menüelement. Wenn nicht in einer Menüleiste oder einem Untermenü, wenn der Fokus nicht das erste fokussierbare Element im Menü ist, verschiebt er optional den Fokus auf das letzte fokussierbare Element.

Pfeil nach unten

Öffnet das Untermenü und verschiebt den Fokus auf das erste Element im Untermenü.

Pfeil nach oben

Öffnet das Untermenü und verschiebt den Fokus auf das letzte Element im Untermenü.

Pos1 (Home)

Verschiebt den Fokus auf das erste Element in der Menüleiste.

Ende (End)

Verschiebt den Fokus auf das letzte Element in der Menüleiste.

Beliebige Zeichentaste

Verschiebt den Fokus auf das nächste Element in der Menüleiste, dessen Name mit dem getippten Zeichen beginnt. Wenn keines der Elemente einen Namen hat, der mit dem getippten Zeichen beginnt, bewegt sich der Fokus nicht.

Beispiele

Nachfolgend sind zwei Beispielimplementierungen von Menüs aufgeführt.

Beispiel 1: Navigationsmenü

<div>  <button aria-haspopup="true" aria-controls="menu">    <img src="hamburger.svg" alt="Page Sections" />  </button>  <ul 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>

Um dieses standardmäßig zugängliche Navigations-Widget schrittweise zu verbessern, sollte die Klasse zum Ausblenden desmenu und das Einfügen vontabindex="-1" auf den interaktiven Menüelement-Inhalt mit JavaScript beim Laden hinzugefügt werden.

Bei der Einbindung eines "menu" zur Navigation auf der Website verwenden Sie nicht die Rollemenu. Verwenden Sie stattdessen für die Hauptnavigation der Website das native HTML-Element<nav> oder einfach eine Liste von Links. Diemenu-Rolle sollte für zusammengesetzte Widgets, die Fokusmanagement erfordern, reserviert werden. SieheARIA-Praktiken für Offenlegungsnavigation für eine Erläuterung und zusätzliche Beispiele.

Beispiel 2: Menüleisten-Untermenüoptionenauswahl

Der folgende Codeausschnitt ist ein Popup-Menü, eingebettet in eine Menüleiste. Es wird angezeigt, wenn der Menüknopf aktiviert ist. Es ist ein Menü, um die Textfarbe aus einer Liste von Farboptionen auszuwählen:

<div>  <button    type="button"    aria-haspopup="menu"    aria-controls="colormenu"    tabindex="0"    aria-label="Text Color: purple">    Purple  </button>  <ul role="menu" aria-label="Color Options" tabindex="-1">    <li      role="menuitemradio"      aria-checked="true"           tabindex="-1">      Purple    </li>    <li      role="menuitemradio"      aria-checked="false"           tabindex="-1">      Magenta    </li>    <li      role="menuitemradio"      aria-checked="false"           tabindex="-1">      Black    </li>  </ul></div>

Der Knopf, der das Menü öffnet, hataria-haspopup="menu" gesetzt, was explizit angibt, dass das Popup, das es steuert, einmenu ist.

Um ein Menü zu öffnen, interagiert der Benutzer in der Regel mit einem Menüknopf als Öffner. Der Menüknopf muss fokussierbar sein und sowohl auf Klicks als auch auf Tastaturereignisse reagieren. Wenn der Fokus gesetzt ist, sollteEnter,Leerzeichen,Pfeil nach unten oderPfeil nach oben das Menü öffnen und den Fokus auf ein Menüelement setzen.

Das Öffnen und Schließen des Menüs schaltet das Attributaria-expanded="true" am Knopf um. Es wird hinzugefügt, wenn das Menü geöffnet ist. Entfernt oder auffalse gesetzt, wenn das Menü geschlossen ist. Der Werttrue zeigt an, dass das Menü angezeigt wird und das Aktivieren des Menüknopfes das Menü schließt.

Wenn das Menü offen ist, erhält der Knopf selbst im Allgemeinen keinen Fokus, während Benutzer durch die Menüpunkte navigieren. Vielmehr schließtEscape und optionalShift + Tab das Menü und gibt den Fokus an den Menüknopf zurück.

Die Rollemenu wurde auf das<ul> gesetzt, wodurch das<ul>-Element als Menü identifiziert wird.

Die Anzeige und das Verbergen des Menüs können mit CSS durchgeführt werden. Beispielsweise können wir in diesen Codebeispielen die Attribut- und Nachbarselektoren verwenden, um die Sichtbarkeit des Menüs umzuschalten:

[role="menu"] {  display: none;}[aria-expanded="true"] + [role="menu"] {  display: block;}

Das Navigationsbeispiel hat einen statischen Knopf. Das Untermenübeispiel hat einen Knopf, der aktualisiert wird, wenn der Benutzer einen neuen Wert auswählt. In diesem Fall ist dasaria-label="Text Color: purple" auf demmenu-Element gesetzt. Es definiert den zugänglichen Namen für das Menü als "Textfarbe: lila"; der Zweck des Menüs (Auswahl einer Textfarbe) und der aktuelle Wert (lila) werden identifiziert. Wenn eine neue Farbe ausgewählt wird, sollte der Wert deraria-label-Eigenschaft ebenfalls aktualisiert werden.

Spezifikationen

Siehe auch

• menubar
• menuitem
• menuitemcheckbox
• menuitemradio
• aria-haspopup