ARIA: Rolle menuitemcheckbox

Beschreibung

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 einem Element mit der Rolle menu oder menubar enthalten oder von ihm besessen sein, möglicherweise verschachtelt in einem Gruppierungselement mit der Rolle group. Das Verschachteln oder anderweitige Besitzen (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 anderen gleichwertigen nativen Rollen 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 sichtbar zu machen, es sei denn, es wird <input type="checkbox"> verwendet, in welchem Fall das Attribut checked verwendet werden sollte.

Ähnlich dem Attribut checked von <input>s des Typs checkbox, zeigt das Attribut aria-checked eines menuitemcheckbox an, ob das Menüelement ausgewählt (true), nicht ausgewählt (false) ist oder ein Untermenü von anderen Menüelementen darstellt, die eine Mischung aus ausgewählten und nicht ausgewählten Werten haben (mixed). Der Wert mixed ist ähnlich dem Attribut indeterminate des Kontrollkästchens, das das Erscheinungsbild eines dritten, weder ausgewählten noch nicht ausgewählten Zustands gibt.

Ein zugänglicher Name ist erforderlich. Ideal ist, dass der zugängliche Name von einem zugeordneten <label>-Element stammt, wenn <input type="checkbox"> verwendet wird, oder von sichtbaren, nachgeordneten Inhalten. Erkennen Sie, wenn das Label oder die nachgeordneten Inhalte nicht ausreichen, und vorzugsweise aria-labelledby verwendet wird, um sich auf nicht-nachgeordneten Inhalt zu beziehen, oder aria-label verwendet wird, denn diese beiden ARIA-Eigenschaften verbergen andere nachgeordnete Inhalte vor unterstützenden Technologien.

Wenn nicht alle Elemente im Set im DOM vorhanden sind, schließen Sie die Eigenschaften aria-setsize und aria-posinset ein. Bei der Angabe von aria-setsize und aria-posinset auf einem menuitemcheckbox setzen Sie den Wert in Bezug auf die Gesamtzahl der Elemente im Menü, ausgenommen jegliche Trennzeichen.

Das Element menuitemcheckbox kann phrasierende Inhalte haben, aber keinen interaktiven Inhalt als Nachfahren und keine Nachfahren mit einem spezifizierten tabindex-Attribut.

Alle Nachfahren sind präsentationell

Es gibt einige Arten von Benutzeroberflächenkomponenten, die, wenn sie in einer Plattformzugä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 nachgeordneten Elemente 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äsentationell sind, ist der folgende Code äquivalent:

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

Aus der Sicht der unterstützenden Technologie existiert die Überschrift nicht, da die vorherigen Code-Snippets im Zugänglichkeit-Baum dem folgenden entsprechen:

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

Zugeordnete WAI-ARIA-Rollen, Zustände und Eigenschaften

menu-Rolle

Widget, das eine Liste mit häufig verwendeten Aktionen oder Funktionen bietet, die der Benutzer ausführen kann.

menubar-Rolle

Ähnlich wie menu für ein konsistentes Set häufig verwendeter Befehle, das sichtbar bleibt und normalerweise horizontal dargestellt wird.

group-Rolle

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 "ausgewählten" Zustand des menuitemcheckbox an.

Tastatur-Interaktionen

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 einem menubar oder einem mit einer Menü-Schaltfläche geöffneten Menü ist, müssen die folgenden Tastatur-Interaktionen programmiert sein. :

Eingabetaste

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.

Esc

Schließt das Menü. In der Menüleiste wird der Fokus auf das übergeordnete Menüleistenelement gesetzt.

Pfeil-rechts

Schließt das Untermenü. In der Menüleiste wird der Fokus auf das nächste Element in der Menüleiste gesetzt und öffnet ein Untermenü, falls vorhanden.

Pfeil-links

Schließt das Menü. In der Menüleiste wird der Fokus auf das vorherige Element in der Menüleiste gesetzt und öffnet ein Untermenü, 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, wird der Fokus nicht verschoben.

Erforderliches JavaScript

Erforderliche Ereignishandler

onclick

Behandelt Mausklicks sowohl auf das Kontrollkästchen als auch das zugehörige Label, die den Zustand des Kontrollkästchens ändern, indem der Wert des aria-checked-Attributs verändert und das Erscheinungsbild des Kontrollkästchens für den sehenden Benutzer angezeigt wird, als wäre es ausgewählt oder nicht ausgewählt.

onKeyDown

Handhabt den Fall, in dem der Benutzer die Leertaste drückt, um den Zustand des Kontrollkästchens zu ändern, indem der Wert des aria-checked-Attributs und das Erscheinungsbild des Kontrollkästchens für den sehenden Benutzer geändert wird. Behandelt auch alle Tasten, die im Abschnitt zur Tastaturnavigation aufgeführt sind.

Beispiele

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

Das tabindex="-1" macht das menuitemcheckbox fokussierbar, aber nicht Teil der Tab-Reihenfolge der Seite. Hätten wir aria-checked="true" hinzugefügt, würde es anzeigen, dass das menuitemcheckbox ausgewählt ist, und wir hätten den ausgewählten Zustand visuell so gestaltet, dass es durch den Attributselektor [role='menuitemcheckbox'][aria-checked='true'] als ausgewählt aussieht. Stattdessen zeigt das Vorhandensein von aria-checked="false" assistiven Technologien an, dass das menuitemcheckbox überprüfbar, aber derzeit nicht ausgewählt ist. Der zugängliche Name "purple" stammt von den Inhalten.

Das visuelle Erscheinungsbild des ausgewählten Zustands ist ein ausgewähltes Kontrollkästchen, das wir durch generierte Inhalte erstellen können, indem es sichtbar und in der gleichen Farbe wie der Inhalt ist, indem wir es mit dem aria-checked-Wert synchronisieren, indem wir Attributselektoren und Vererben verwenden.

[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";
}

Bevorzugen Sie HTML

Die erste Regel von ARIA lautet: Wenn ein nativer HTML- oder Attribut das erforderliche Semantische und Verhalten bietet, verwenden Sie dieses anstelle der Umnutzung eines Elements und das Hinzufügen einer ARIA-Rolle, eines Zustands oder einer Eigenschaft, um es zugänglich zu machen. Daher wird empfohlen, das native HTML-Checkbox-Formularsteuerungselement zu verwenden, anstatt die Funktionalität eines Kontrollkästchens mit JavaScript und ARIA neu zu erstellen.

Spezifikationen

Siehe auch

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