ARIA: Option-Rolle

Die option-Rolle wird verwendet, um Auswahlen zu identifizieren, die ein Benutzer in einer listbox treffen kann. Diese Optionen sind ähnlich den <option>-Elementen in einem <select>-Element, aber sie können Bilder enthalten.

Alle auswählbaren Optionen sollten aria-selected im Einklang mit ihrem Zustand haben, true wenn ausgewählt und false wenn nicht. Wenn eine Option nicht auswählbar ist, kann aria-selected weggelassen werden. Eine deaktivierte Option kann aria-disabled="true" und aria-selected="false" haben, um dem Benutzer mitzuteilen, dass die Option vorhanden, aber deaktiviert ist.

Die option-Rolle dient der Identifizierung auswählbarer Auswahlmöglichkeiten einer listbox. Optionen müssen einen zugänglichen Namen erhalten. Im Allgemeinen sollte der zugängliche Name für eine Option aus dem Nachkommeninhalt des Elements stammen.

Autoren können auch explizit einen zugänglichen Namen bereitstellen, indem sie aria-label oder aria-labelledby für das Element mit der option-Rolle angeben. Wenn aria-label oder aria-labelledby verwendet wird und die Option auch ein sichtbares Textlabel anzeigt, müssen Autoren sicherstellen, dass sie dem WCAG-Erfolgskriterium 2.5.3 Label in Name entsprechen.

Es wird sehr empfohlen, stattdessen, wenn möglich, ein <select>-Element oder ein <input>-Element mit dem Typ checkbox oder radio zu verwenden. Diese nativen HTML-Elemente bieten Tastaturinteraktivität, um den Fokus für alle Nachkommen automatisch zu verwalten.

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

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

<div role="option"><h3>Title of my option</h3></div>

Da die Nachkommen von option präsentational sind, ist der folgende Code gleichwertig:

<div role="option"><h3 role="presentation">Title of my option</h3></div>

Aus der Perspektive eines Benutzers von unterstützender Technologie existiert die Überschrift nicht, da die vorherigen Codefragmente gleichbedeutend mit dem Folgenden im Zugänglichkeitsbaum sind:

<div role="option">Title of my option</div>

Zugehörige Rollen

listbox

Eine option muss in einer listbox enthalten sein oder von ihr besessen werden

Zustände und Eigenschaften

aria-selected

Wird verwendet, um den Auswahlzustand der Option zu beschreiben. Erforderlich.

aria-checked

Wird verwendet, um den Überprüfungszustand zu beschreiben, wenn Optionen in einer Mehrfachauswahl verwendet werden. Unterstützt true, false und mixed. Optional.

aria-posinset

Wird verwendet, um die Position in der Menge von Optionen zu beschreiben, wenn sie nicht dem DOM entspricht, wie bei virtuellem Scrollen, bei dem nur einige Optionen gleichzeitig präsent sind. Optional.

aria-setsize

Wird in Verbindung mit aria-posinset verwendet, um die Gesamtzahl der Optionen anzugeben. Optional.

aria-disabled

Wird verwendet, um anzuzeigen, dass die Option vorhanden, aber nicht bearbeitbar ist. Optional.

aria-hidden

Wird verwendet, um die Option vor Accessibility-Tools zu verbergen. Sollte nur verwendet werden, um nicht sichtbare Inhalte oder sichtbare Inhalte zu verstecken, wenn es die Erfahrung von unterstützender Technologie verbessert, wie zum Beispiel redundante Inhalte. Optional.

aria-invalid

Wird verwendet, um anzuzeigen, dass der Wert der Option von der Anwendung als ungültig betrachtet wird. Optional.

aria-busy

Wird verwendet, um anzuzeigen, dass ein Element modifiziert wird, zum Beispiel während es geladen wird. Optional.

aria-labelledby

Wird verwendet, um anzuzeigen, welches Element die Option beschriftet. Der Inhalt der Option sollte stattdessen verwendet werden, falls zutreffend. Optional.

aria-label

Wird verwendet, um die Option zu beschriften. Wenn das Label im DOM vorhanden ist, sollte aria-labelledby stattdessen verwendet werden. Optional.

(Für weitere Details und eine vollständige Liste der ARIA-Zustände und -Eigenschaften siehe die ARIA option (Rolle)-Dokumentation.)

• HTML <select>-Element
• HTML <label>-Element
• HTML <option>-Element
• ARIA: combobox-Rolle
• ARIA: list-Rolle
• ARIA: listbox-Rolle