ARIA: option-Rolle

Die option-Rolle wird verwendet, um Auswahlmöglichkeiten zu identifizieren, die ein Benutzer in einer listbox treffen kann. Diese Optionen ähneln den <option>-Elementen in einem <select>-Element, können jedoch Bilder enthalten.

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

Die option-Rolle wird verwendet, um auswählbare Entscheidungen einer listbox zu identifizieren. Optionen müssen einen zugänglichen Namen haben. In der Regel sollte der zugängliche Name für eine Option aus dem untergeordneten Inhalt 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 einen sichtbaren Textbeschriftung enthält, müssen die Autoren sicherstellen, dass sie dem WCAG-Erfolgskriterium 2.5.3 Beschriftung im Namen entsprechen.

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

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

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

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

Weil Nachfahren von option präsentationell sind, ist der folgende Code gleichwertig:

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

Aus der Sicht der Benutzer von unterstützender Technologie existiert die Überschrift nicht, da die vorherigen Codebeispiele gleichwertig mit dem folgenden im Zugriffsbarkeitsbaum sind:

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

Zugehörige Rollen

listbox

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

Zustände und Eigenschaften

aria-selected

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

aria-checked

Wird verwendet, um den ausgewählten Zustand 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 der Optionen zu beschreiben, wenn diese nicht mit dem DOM übereinstimmt, z. B. bei virtuellem Scrollen, wenn nur einige Optionen gleichzeitig vorhanden sind. Optional.

aria-setsize

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

aria-disabled

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

aria-hidden

Wird verwendet, um die Option vor Zugriffs-Tools zu verbergen. Es sollte nur verwendet werden, um nicht sichtbaren Inhalt oder sichtbaren Inhalt zu verbergen, wenn es die Erfahrung mit unterstützender Technologie verbessert, z. B. redundanter Inhalt. Optional.

aria-invalid

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

aria-busy

Wird verwendet, um anzugeben, dass ein Element modifiziert wird, z. B. während es geladen wird. Optional.

aria-labelledby

Wird verwendet, um anzugeben, welches Element die Option beschriftet. Der Inhalt der Option sollte stattdessen verwendet werden, wo dies zutrifft. Optional.

aria-label

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

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