ARIA: option Rolle

Beschreibung

Die option-Rolle wird verwendet, um auswählbare Optionen in einer listbox zu identifizieren, die ein Benutzer 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 entsprechend ihrem Zustand angepasst 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 zu kommunizieren, 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 nachgeordneten Inhalt des Elements stammen.

Autoren können auch ausdrücklich 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 wird und die Option auch eine sichtbare Textbezeichnung anzeigt, müssen die Autoren darauf achten, dass sie dem WCAG-Erfolgskriterium 2.5.3 Label in Name folgen.

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

Alle Nachkommen sind präsentativ

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 diesem Problem umzugehen, wenden Browser automatisch die Rolle presentation auf alle Nachfahren von jedem option-Element an, da es sich um eine Rolle handelt, die keine semantischen Kinder unterstützt.

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

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

Da Nachkommen von option präsentativ sind, ist der folgende Code äquivalent:

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

Aus Sicht des Nutzers von unterstützenden Technologien existiert die Überschrift nicht, da die vorherigen Codebeispiele dem folgenden im Accessibility Tree entsprechen:

<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 Auswahlszustand der Option zu beschreiben.

aria-checked

Wird verwendet, um den Aktivierungszustand zu beschreiben, wenn Optionen in einer mehrfachen Auswahl 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, wie bei virtuellem Scrollen, bei dem nur einige Optionen gleichzeitig vorhanden sind. Optional.

aria-setsize

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

aria-disabled

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

aria-hidden

Wird verwendet, um die Option vor Zugänglichkeitswerkzeugen zu verbergen. Es sollte nur verwendet werden, um nicht sichtbare Inhalte oder sichtbare Inhalte zu verbergen, wenn es die Erfahrung von unterstützender Technologie verbessert, wie z. B. 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 verändert wird, wie z. B. 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, wo angemessen. Optional.

aria-label

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

Spezifikationen

Siehe auch

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