ARIA: option Rolle

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

Alle auswählbaren Optionen sollten mit aria-selected ihrem Zustand entsprechen, true im ausgewählten Zustand und false, wenn nicht ausgewählt. 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 zur Identifizierung von auswählbaren Möglichkeiten in einer listbox. Optionen müssen einen zugänglichen Namen erhalten. Im Allgemeinen 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 eine sichtbare Textbezeichnung anzeigt, müssen Autoren sicherstellen, dass sie sich an das WCAG-Erfolgskriterium 2.5.3 Label in Name halten.

Es wird dringend empfohlen, stattdessen ein <select>-Element oder ein <input>-Element mit dem Typ checkbox oder radio zu verwenden, wenn möglich. 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-Zugänglichkeits-API dargestellt werden, nur Text enthalten können. Zugänglichkeits-APIs haben keine Möglichkeit, semantische Elemente, die in einer option enthalten sind, darzustellen. Um mit dieser Einschränkung umzugehen, wenden Browser automatisch die Rolle presentation auf alle untergeordneten Elemente eines option-Elements an, da es sich um eine Rolle handelt, die keine semantischen Kinder unterstützt.

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

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

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

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

Aus der Perspektive des Benutzers von unterstützender Technologie existiert die Überschrift nicht, da die vorherigen Codeschnipsel dem folgenden im Zugänglichkeit-Baum äquivalent sind:

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

Zugeordnete Rollen

listbox

Eine option muss in einer listbox enthalten sein oder dieser zugeordnet sein

Zustände und Eigenschaften

aria-selected

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

aria-checked

Wird verwendet, um den Kontrollkästchenzustand zu beschreiben, wenn Optionen in einem Mehrfachauswahlmodus verwendet werden. Unterstützt true, false und mixed. Optional.

aria-posinset

Wird verwendet, um die Position innerhalb des Satzes von Optionen zu beschreiben, wenn sie nicht mit dem DOM übereinstimmt, wie z. B. bei virtuellem Scrollen, bei dem nur einige Optionen auf einmal vorhanden sind. Optional.

aria-setsize

Wird in Verbindung mit aria-posinset verwendet, um die Gesamtanzahl 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 Zugangs-Tools zu verbergen. Es sollte nur verwendet werden, um nicht sichtbaren Inhalt oder sichtbaren Inhalt zu verbergen, wenn dies die Erfahrung mit unterstützender Technologie verbessert, wie 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 geändert wird, z. B. während es geladen wird. Optional.

aria-labelledby

Wird verwendet, um anzugeben, welches Element die Option etikettiert. Der Inhalt der Option sollte stattdessen verwendet werden, wo es angemessen ist. Optional.

aria-label

Wird verwendet, um die Option zu etikettieren. Wenn die Bezeichnung 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