ARIA: role-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 von einem Element mit der Rolle menu oder menubar enthalten oder besessen werden, optional verschachtelt innerhalb eines Gruppierungselements mit der Rolle group. Dass sie in einem menu oder menubar verschachtelt oder anderweitig besessen sind (siehe aria-owns), 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 gleichwertigen 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 dem checked-Attribut von <input>-Elementen vom Typ checkbox zeigt das aria-checked-Attribut eines menuitemcheckbox an, ob das Menüelement markiert (true), nicht markiert (false) oder ein untergeordnetes Menü aus anderen Menüelementen darstellt, die eine Mischung aus markierten und nicht markierten Werten aufweisen (mixed). Der Wert mixed ist ähnlich dem Attribut indeterminate des Kontrollkästchens, das das Erscheinungsbild eines dritten Zustands verleiht, der weder markiert noch nicht markiert ist.

Ein zugänglicher Name ist erforderlich. Idealerweise sollte der zugängliche Name von einem zugeordneten <label>-Element kommen, wenn <input type="checkbox"> verwendet wird, oder von sichtbarem, abgeleiteten Inhalt. Wenn das Label oder der abgeleitete Inhalt nicht ausreichend ist und vorzugsweise aria-labelledby verwendet wird, um auf nicht-abgeleiteten Inhalt zu verweisen, oder aria-label verwendet wird, werden diese beiden ARIA-Eigenschaften anderen abgeleiteten Inhalt vor unterstützende Technologien verbergen.

Wenn alle Elemente des Satzes nicht im DOM vorhanden sind, fügen Sie die Eigenschaften aria-setsize und aria-posinset hinzu. Wenn aria-setsize und aria-posinset bei einem menuitemcheckbox angegeben werden, setzen Sie den Wert in Bezug auf die Gesamtzahl der Elemente im Menü, ohne Trennzeichen eingeschlossen.

Das menuitemcheckbox-Element kann Phraseninhalt haben, darf jedoch keinen interaktiven Inhalt als Nachfahren haben und keine Nachfahren mit einem angegebenen tabindex-Attribut.

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

Zum Beispiel betrachten Sie das folgende menuitemcheckbox-Element, das eine Überschrift enthält.

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

Da Nachfahren von menuitemcheckbox präsentativ sind, ist der folgende Code gleichwertig:

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

Aus der Sicht des Benutzers von unterstützender Technologie existiert die Überschrift nicht, da die vorherigen Codeschnipsel dem folgenden im Zugänglichkeitsbaum entsprechen:

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

Rolle menu

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

Rolle menubar

Ähnlich wie menu für einen konsistenten Satz von häufig verwendeten Befehlen, die sichtbar bleiben und normalerweise horizontal dargestellt werden.

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, gibt es den aktuellen "geprüften" 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 das menuitemcheckbox in einem Untermenü in einer menubar oder einem mit einem Menüknopf geöffneten Menü ist, müssen die folgenden Tastaturinteraktionen einprogrammiert werden:

Enter

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

Space

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

Escape

Schließt das Menü. In der Menüleiste wird der Fokus auf das übergeordnete Menüelement verschoben.

Rechtspfeil

Schließt das Untermenü. In der Menüleiste wird der Fokus auf das nächste Element in der Menüleiste verschoben, wobei jedes Untermenü geöffnet wird, falls vorhanden.

Linkspfeil

Schließt das Menü. In der Menüleiste wird der Fokus auf das vorherige Element in der Menüleiste verschoben, wobei jedes Untermenü geöffnet wird, falls vorhanden.

Abwärtspfeil

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.

Aufwärtspfeil

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, dessen Name mit dem eingegebenen Zeichen beginnt. Wenn keines der Elemente einen Namen hat, der mit dem eingegebenen Zeichen beginnt, bewegt sich der Fokus nicht.

Erforderliche Ereignishandler

onclick

Verarbeitung von Mausklicks sowohl auf das Kontrollkästchen als auch auf das zugehörige Label, das den Zustand des Kontrollkästchens durch Ändern des Werts des aria-checked-Attributs und des Erscheinungsbilds des Kontrollkästchens ändert, damit es für den sehenden Benutzer markiert oder nicht markiert erscheint.

onKeyDown

Behandeln Sie den Fall, in dem der Benutzer die Space-Taste drückt, um den Zustand des Kontrollkästchens durch Ändern des Werts des aria-checked-Attributs und des Erscheinungsbilds des Kontrollkästchens zu ändern, damit es für den sehenden Benutzer markiert oder nicht markiert erscheint. Bearbeitet auch alle im Abschnitt Tastaturnavigation aufgeführten Tasten.

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

Der tabindex="-1" macht das menuitemcheckbox fokussierbar, aber nicht Teil der Seiten-Tab-Sequenz. Hätten wir aria-checked="true" eingeschlossen, hätte dies angezeigt, dass das menuitemcheckbox markiert war, und wir hätten den ausgewählten Zustand visuell so gestaltet, dass er mit dem Attributselektor [role='menuitemcheckbox'][aria-checked='true'] markiert aussieht. Stattdessen zeigt das Vorhandensein von aria-checked="false" unterstützenden Technologien an, dass das menuitemcheckbox überprüfbar ist, aber derzeit nicht markiert ist. Der zugängliche Name "purple" stammt aus dem Inhalt.

Das visuelle Erscheinungsbild des ausgewählten Zustands ist ein markiertes Kontrollkästchen, das wir mit generiertem Inhalt erstellen können, was es sichtbar und von derselben Farbe wie der Inhalt macht, indem es mit dem aria-checked-Wert unter Verwendung von CSS-Attributselektoren synchronisiert und die Farbe vererbt wird.

[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 ist: Wenn ein nativer HTML-Element oder -Attribut die erforderlichen Semantiken und Verhaltensweisen hat, verwenden Sie es, anstatt ein Element neu zu zuweisen und eine ARIA-Rolle, -Zustand oder -Eigenschaft hinzuzufügen, um es zugänglich zu machen. Daher wird empfohlen, das native HTML-Kontrollkästchen Formularsteuerung zu verwenden, anstatt die Funktionalität eines Kontrollkästchens mit JavaScript und ARIA neu zu erstellen.

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