ARIA: Rolle menuitemcheckbox

Die Elemente in Menüs und Menüleisten sind Menüelemente. Es gibt drei Arten von Menüelementen: menuitem, menuitemradio und menuitemcheckbox.

Diese drei Elemente können nur in oder in Besitz eines Elements mit der Rolle menu oder menubar enthalten sein, optional eingebettet in ein Gruppenelement mit der Rolle group. Das Eingebettet-Sein oder anderweitig im Besitz-Sein (siehe aria-owns) in einem menu oder menubar identifiziert die Menüelemente als verwandte Widgets.

Menüelemente, einschließlich menuitemcheckbox-Elementen, können innerhalb von group-Elementen gruppiert oder durch Elemente mit der Rolle separator oder einer anderen äquivalenten nativen Rolle wie <fieldset> und <hr> getrennt werden.

Menüelemente mit der Rolle menuitemcheckbox müssen das Attribut aria-checked enthalten, um den Zustand des Kontrollkästchens für unterstützende Technologien offenzulegen, es sei denn, es wird <input type="checkbox"> verwendet, in diesem Fall sollte das Attribut checked verwendet werden.

Ähnlich wie das checked-Attribut von <input>-Elementen vom Typ checkbox, zeigt das aria-checked-Attribut eines menuitemcheckbox an, ob das Menüelement aktiviert (true), deaktiviert (false) ist oder ein Untermenü von anderen Menüelementen darstellt, die eine Mischung aus aktiven und inaktiven Werten aufweisen (mixed). Der Wert mixed ist ähnlich dem Attribut indeterminate des Kontrollkästchens, welches das Erscheinungsbild eines dritten, weder aktivierten noch deaktivierten Zustands gibt.

Ein zugänglicher Name ist erforderlich. Idealerweise sollte der zugängliche Name von einem assoziierten <label>-Element stammen, wenn <input type="checkbox"> verwendet wird oder aus sichtbarem, untergeordnetem Inhalt bestehen. Wenn das Label oder untergeordneter Inhalt nicht ausreichend ist, und vorzugsweise aria-labelledby verwendet wird, das nicht-untergeordneten Inhalt referenziert, oder aria-label verwendet wird, werden diese beiden ARIA-Eigenschaften anderen untergeordneten Inhalt vor unterstützenden Technologien verbergen.

Wenn nicht alle Elemente der Menge im DOM vorhanden sind, schließen Sie die Eigenschaften aria-setsize und aria-posinset ein. Wenn aria-setsize und aria-posinset auf einem menuitemcheckbox spezifiziert werden, setzen Sie den Wert in Bezug auf die Gesamtanzahl der Elemente im Menü ohne jegliche Separatoren.

Das menuitemcheckbox-Element kann Inhaltsbestandteile enthalten, darf jedoch keine interaktiven Inhalte als Nachfahren haben und keine Nachfahren mit einem spezifizierten tabindex-Attribut haben.

Es gibt einige Arten von Benutzeroberflächenkomponenten, die, wenn sie in einer Plattform-Accessibilty-API dargestellt werden, nur Text enthalten können. Accessibility-APIs haben keine Möglichkeit, semantische Elemente innerhalb eines menuitemcheckbox darzustellen. Um mit dieser Einschränkung umzugehen, wenden Browser automatisch die Rolle presentation auf alle nachgeordneten Elemente eines jeden menuitemcheckbox-Elements an, da es sich um eine Rolle handelt, die keine semantischen Kinder unterstützt.

Betrachten Sie zum Beispiel das folgende menuitemcheckbox-Element, das eine Überschrift enthält.

<div role="menuitemcheckbox"><h6>Name of my checkbox</h6></li>

Da Nachkommen von menuitemcheckbox präsentativ sind, ist der folgende Code äquivalent:

<div role="menuitemcheckbox"><h6 role="presentation">Name of my checkbox</h6></li>

Aus der Sicht des Benutzers von unterstützender Technologie existiert die Überschrift nicht, da die vorherigen Codefragmente dem folgenden im Accessibility-Tree entsprechen:

<div role="menuitemcheckbox">Name of my checkbox</div>

Rolle menu

Widget, das eine Liste gemeinsamer Aktionen oder Funktionen bietet, die der Benutzer aufrufen kann.

Rolle menubar

Ähnlich wie menu für eine konsistente Gruppe häufig verwendeter Befehle, die sichtbar bleibt und normalerweise horizontal dargestellt wird.

Rolle group

Container für eine Gruppe von menuitem-Elementen einschließlich menuitemcheckbox-Elementen innerhalb eines menu oder menubar.

aria-checked (erforderlich)

Auf true, false oder mixed gesetzt, zeigt es den aktuellen "aktivierten" Zustand des menuitemcheckbox an.

Wenn ein menu geöffnet wird oder wenn ein menubar den Fokus erhält, wird der Tastaturfokus auf das erste Element gesetzt. Alle Elemente in beiden sind fokussierbar, einschließlich aller menuitemcheckbox-Elemente.

Wenn sich das menuitemcheckbox in einem Untermenü in einer menubar oder einem mit einem Menü-Button geöffneten Menü befindet, müssen die folgenden Tastaturinteraktionen programmiert werden:

Enter

Schaltet den aria-checked-Zustand des menuitemcheckbox um und schließt das Menü.

Leertaste

Schaltet den aria-checked-Zustand des menuitemcheckbox um. Schließt das Menü nicht.

Escape

Schließt das Menü. In der menubar wird der Fokus auf das übergeordnete menubar-Element verschoben.

Pfeil nach rechts

Schließt das Untermenü. In der menubar wird der Fokus auf das nächste Element in der menubar verschoben und öffnet ein eventuell vorhandenes Untermenü.

Pfeil nach links

Schließt das Menü. In der menubar wird der Fokus auf das vorherige Element in der menubar verschoben und öffnet ein eventuell vorhandenes Untermenü.

Pfeil nach unten

Verschiebt den Fokus auf das nächste Element im Menü. Wenn der Fokus auf dem letzten Element ist, wird der Fokus auf das erste Element verschoben.

Pfeil nach oben

Verschiebt den Fokus auf das vorherige Element im Menü. Wenn der Fokus auf dem ersten Element ist, wird der Fokus auf das letzte Element verschoben.

Home

Verschiebt den Fokus auf das erste Element im Menü.

Ende

Verschiebt den Fokus auf das letzte Element im Menü.

Zeichen

Verschiebt den Fokus auf das nächste Element mit einem Namen, der mit dem getippten Zeichen beginnt. Wenn keines der Elemente einen Namen hat, der mit dem getippten Zeichen beginnt, bewegt sich der Fokus nicht.

Erforderliche Ereignishandler

onclick

Bearbeitet Mausklicks sowohl auf das Kontrollkästchen als auch auf das zugehörige Label, das den Zustand des Kontrollkästchens durch Ändern des Wertes des aria-checked-Attributs und des Aussehens des Kontrollkästchens ändert, damit es für sehende Benutzer aktiviert oder deaktiviert erscheint.

onKeyDown

Bearbeitet den Fall, wenn der Benutzer die Leertaste drückt, um den Zustand des Kontrollkästchens durch Ändern des Wertes des aria-checked-Attributs und des Aussehens des Kontrollkästchens zu ändern, damit es für sehende Benutzer aktiviert oder deaktiviert erscheint. Bearbeitet auch alle in der oben genannten Tastaturnavigationssektion aufgeführten Tasten.

<li role="menuitemcheckbox" tabindex="-1" aria-checked="false">Purple</li>

Das tabindex="-1" macht das menuitemcheckbox fokussierbar, gehört aber nicht zur Tab-Reihenfolge der Seite. Hätten wir aria-checked="true" hinzugefügt, hätte es angezeigt, dass das menuitemcheckbox aktiviert ist, und wir hätten den ausgewählten Zustand mit dem Attributselektor [role='menuitemcheckbox'][aria-checked='true'] visuell so gestaltet, dass es aktiviert aussieht. Stattdessen zeigt die Präsenz von aria-checked="false" den unterstützenden Technologien an, dass das menuitemcheckbox überprüfbar ist, aber derzeit nicht aktiviert ist. Der zugängliche Name "purple" stammt aus dem Inhalt.

Das visuelle Erscheinungsbild des ausgewählten Zustands ist ein geprüftes Kontrollkästchen, das wir durch die Verwendung von erzeugtem Inhalt erstellen können, indem wir es sichtbar machen und in der gleichen Farbe wie der Inhalt durch Synchronisation mit dem aria-checked-Wert unter Verwendung von CSS- Attributselektoren und Vererbung gestalten.

[role="menuitemcheckbox"]::before {
  display: inline-block;
  content: "";
  color: transparent;
  width: 1em;
  text-align: center;
  outline: 1px solid;
  margin-inline-end: 2px;
  font-family: sans-serif;
}
[role="menuitemcheckbox"][aria-checked="true"]::before {
  color: inherit;
  content: "X";
}

Die erste Regel von ARIA lautet: Wenn ein nativer HTML-Element oder -Attribut die benötigten Semantiken und Verhaltensweisen bietet, verwenden Sie es anstelle der Zweckentfremdung eines Elements und der Hinzufügung einer ARIA-Rolle, eines Zustands oder einer Eigenschaft, um es zugänglich zu machen. Daher wird empfohlen, das native HTML-Kontrollkästchen Formsteuerung zu verwenden, anstatt die Funktionalität eines Kontrollkästchens mit JavaScript und ARIA nachzubilden.

• menuitemradio Rolle
• checkbox Rolle
• <input type="checkbox">