ARIA: option-Rolle

Beschreibung

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 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 dazu, auswählbare Optionen einer listbox zu identifizieren. Optionen müssen einen zugänglichen Namen haben. Im Allgemeinen sollte der zugängliche Name für eine Option aus dem Inhalt der Nachfahren des Elements entnommen werden.

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

Es wird dringend empfohlen, 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 automatisch für alle Nachfahren zu steuern.

Alle Nachfahren sind präsentational

Es gibt einige Arten von Benutzeroberflächenkomponenten, die, wenn sie in einer Plattform-Zugangs-API dargestellt werden, nur Text enthalten können. Zugangs-APIs haben keine Möglichkeit, semantische Elemente darzustellen, die in einem option enthalten sind. Um mit dieser Einschränkung umzugehen, wenden Browser automatisch die Rolle presentation auf alle Nachfahrenelemente eines option-Elements an, da es sich um eine Rolle 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>

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

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

Aus der Sicht des Benutzers von unterstützender Technologie existiert die Überschrift nicht, da die vorherigen Code-Snippets im Zugänglichkeitsbaum äquivalent zu folgendem sind:

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

Zugehörige ARIA-Rollen, -Zustände und -Eigenschaften

Zugehörige Rollen

listbox

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

Zustände und Eigenschaften

aria-selected

Wird verwendet, um den Auswählungszustand der Option zu beschreiben.

aria-checked

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

aria-posinset

Wird verwendet, um die Position im Optionssatz zu beschreiben, wenn sie nicht mit dem DOM übereinstimmt, z.B. bei virtuellem Scrollen, wenn nur einige Optionen gleichzeitig vorhanden sind. Optional.

aria-setsize

Wird zusammen mit aria-posinset verwendet, um die Gesamtanzahl 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 Zugangs-Tools zu verbergen. Sollte nur verwendet werden, um nicht sichtbare Inhalte oder sichtbare Inhalte zu verbergen, wenn es die Erfahrung für unterstützende Technologie verbessert, wie redundante Inhalte. Optional.

aria-invalid

Wird verwendet, um anzuzeigen, dass der Wert der Option von der Anwendung als ungültig angesehen 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 anzugeben, welches Element die Option beschriftet. Der Inhalt der Option sollte stattdessen verwendet werden, wo es angebracht ist. Optional.

aria-label

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

Spezifikationen

Siehe auch

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