ARIA: Rolle combobox

Die Rolle combobox identifiziert ein Element als input, das ein anderes Element steuert, wie z.B. ein listbox oder grid, das dynamisch angezeigt werden kann, um dem Benutzer zu helfen, den Wert dieses input festzulegen.

Beschreibung

Ein combobox ist ein zusammengesetztes Widget, das ein benanntes Eingabefeld mit einem Popup kombiniert, das mögliche Werte für dieses Eingabefeld bereitstellt. Der Zweck dieses Widgets ist es, die Benutzererfahrung zu verbessern, indem dem Benutzer geholfen wird, einen Wert auszuwählen, ohne den vollständigen Wert eingeben zu müssen, und optional, je nachdem ob unterstützte Werte begrenzt sind, den Benutzer daran zu hindern, ungültige oder nicht unterstützte Werte einzugeben.

Die Rolle combobox wird auf das Eingabefeld gesetzt, das ein anderes Element steuert, wie z.B. eine Listbox oder ein Grid, das dynamisch angezeigt werden kann, um dem Benutzer zu helfen, den Wert des Eingabefeldes festzulegen.

Das Eingabefeld der combobox kann entweder ein einzeiliges Textfeld sein, das Editieren und Tippen unterstützt, ähnlich einem HTML <input> mit einer <datalist>, oder ein Element, das nur den aktuellen Wert der Combobox anzeigt.

Eine WAI-ARIA combobox hat nur ein Attribut, das Autoren angeben müssen: aria-expanded. Sie hat jedoch auch mehrere andere Attribute, die angegeben werden müssen, abhängig von der Implementierung der Combobox. Dazu gehören aria-haspopup, aria-controls, aria-activedescendant und aria-autocomplete.

Typischerweise ist der Anfangszustand einer Combobox eingeklappt, mit aria-expanded="false" gesetzt. Im eingeklappten Zustand sind nur das Combobox-Element und optional ein benachbarter Button, um das Popup aufzurufen, sichtbar. Das Attribut aria-expanded mit dem Wert false ist notwendig, wenn es eingeklappt ist, weil es assistiven Technologien anzeigt, dass das Widget erweiterbar ist.

Die Combobox ist im erweiterten Zustand, wenn sowohl das Combobox-Element, das seinen aktuellen Wert anzeigt, als auch sein zugehöriges Popup-Element sichtbar sind. Wenn es erweitert ist, muss aria-expanded="true" gesetzt sein.

Das Popup-Element, das mit einer combobox verbunden ist, kann entweder ein listbox, tree, grid oder dialog Element sein.

Comboboxes haben einen impliziten aria-haspopup Wert von listbox, sodass das Hinzufügen dieses Attributs optional ist, wenn das Popup eine listbox ist. Wenn das Combobox-Popup-Element ein tree, grid oder dialog (alles andere als eine listbox) ist, ist das aria-haspopup Attribut erforderlich. Der Wert von aria-haspopup muss entweder die Rolle tree, grid, dialog oder listbox sein. Beachten Sie, dass für diese Eigenschaft true menu bedeutet, also stellen Sie sicher, dass der Wert der Rolle des Popups entspricht und nicht einem booleschen Wert.

Wenn das Popup einer Combobox angezeigt wird, stellen Sie sicher, dass das Attribut aria-controls auf dem Combobox-Element auf die id des Popup-listbox, tree, grid oder dialog-Elements gesetzt ist. Dies zeigt an, wie die Beziehung zwischen dem Element mit der Rolle combobox und dem Popup, das es steuert, gekennzeichnet ist. (Hinweis: In älteren ARIA-Spezifikationen war dies aria-owns anstelle von aria-controls, sodass Sie aria-owns in älteren Combobox-Implementierungen sehen könnten. Das aria-owns im Code sollte auf aria-controls aktualisiert werden!)

Wenn die Benutzeroberfläche der Combobox ein sichtbares Steuerelement enthält, wie zum Beispiel ein Symbol, das es ermöglicht, die Sichtbarkeit des Popups über Zeiger- und Berührungsereignisse zu steuern, sollte dieses Steuerelement ein <button>, <input> vom Typ button oder ein Element mit der Rolle button mit einem tabindex von -1 sein. Dies wird es ermöglichen, dass der Button fokussierbar, aber nicht in der Tab-Folge der Tastatur enthalten ist. Es darf nicht ein Nachfolger des Elements mit der Rolle combobox sein.

Um tastaturzugänglich zu sein, muss die Tastaturunterstützung für die Verschiebung des Fokus zwischen dem combobox Eingabefeld und den im Popup enthaltenen Elementen programmiert werden, wie listbox, tree, grid oder dialog. Eine gängige Konvention ist, dass die Pfeil nach unten Taste den Fokus vom Eingabefeld auf den ersten fokussierbaren Nachfolger des Popup-Elements verschiebt.

Die Eigenschaft aria-activedescendant kann verwendet werden, um das derzeit aktive Element des Combobox-Popups zu identifizieren, zum Beispiel eine option innerhalb einer Popup-listbox, für Implementierungen, bei denen der DOM-Fokus auf der Combobox bleibt. Wenn der DOM-Fokus beim Aufrufen des Popups nicht auf der Combobox bleibt, sondern stattdessen in das Popup verschoben wird, wie in einem Dialog, dann könnte aria-activedescendant nicht notwendig sein.

Wenn das Combobox-Element ein <input> Element ist, ist der Wert der Combobox der Wert des Eingabefeldes. Andernfalls stammt der Wert der Combobox von seinen Nachfolgeelementen.

Wenn die combobox Texteingaben unterstützt und Autovervollständigung bietet, setzen Sie aria-autocomplete auf dem Combobox-Element auf den Wert, der dem angebotenen Verhalten entspricht: inline, list oder both. Das Attribut aria-autocomplete zeigt an, dass die Eingabe von Text die Anzeige einer oder mehrerer Vorhersagen des beabsichtigten Wertes der Combobox auslösen wird und spezifiziert, wie die Vorhersagen bei deren Anzeige präsentiert werden.

Jede combobox muss einen zugänglichen Namen haben. Wenn Sie ein <input> Element verwenden, sollte der zugängliche Name von dem zugehörigen <label> stammen. Wenn nicht, und wenn ein entsprechendes Label im Inhalt sichtbar ist, geben Sie den Namen via aria-labelledby an. Mit anderen Worten, wenn es ein Element in der Benutzeroberfläche gibt, das als Label für das combobox Eingabefeld dient, fügen Sie aria-labelledby als Attribut auf dem Element mit der Rolle combobox hinzu und setzen Sie den Wert des Attributs auf die id des oder der labelnden Elemente. Wenn kein sichtbares Label vorhanden ist, verwenden Sie stattdessen aria-label. Nicht beides.

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

aria-expanded

Erforderlich. Identifiziert, ob die Combobox geöffnet (true) oder geschlossen (false) ist.

aria-haspopup

Impliziert. Wenn weggelassen, Standardwert listbox. Unterstützt auch tree, grid oder dialog. Identifiziert, dass die Combobox ein Popup hat und gibt den Typ an.

Tastaturinteraktionen

Pfeil nach unten

Verschiebt den Fokus zur nächsten Option oder zur ersten Option, wenn keine ausgewählt war.

Alt + Pfeil nach unten (Optional)

Wenn das Popup verfügbar, aber nicht angezeigt ist, wird das Popup angezeigt, ohne den Fokus zu verschieben.

Pfeil nach oben

Verschiebt den Fokus zur vorherigen Option. Verschiebt den Fokus zur ersten Option, wenn der Fokus ursprünglich auf der letzten Option lag.

Alt + Pfeil nach oben (Optional)

Wenn das Popup den Fokus hat, kehrt er zum Combobox zurück, ansonsten schließt es das Popup.

Enter

Wenn die Combobox editierbar ist und ein Autovervollständigungsvorschlag im Popup ausgewählt ist, nimmt den Vorschlag entweder an, indem der Eingabecursor am Ende des akzeptierten Wertes in der Combobox platziert wird oder indem eine Standardaktion für den Wert ausgeführt wird. Zum Beispiel kann die Standardaktion in einer Messaging-Anwendung sein, den akzeptierten Wert zu einer Liste von Nachrichtenempfängern hinzuzufügen und dann die Combobox zu leeren, sodass der Benutzer einen weiteren Empfänger hinzufügen kann.

Beispiele

html
<label for="jokes">Pick what type of jokes you like</label>
<div class="combo-wrap">
  <input
    type="text"
    id="jokes"
    role="combobox"
    aria-controls="joketypes"
    aria-autocomplete="list"
    aria-expanded="false"
    data-active-option="item1"
    aria-activedescendant="" />
  <span aria-hidden="true" data-trigger="multiselect"></span>
  <ul id="joketypes" role="listbox" aria-label="Jokes">
    <li class="active" role="option" id="item1">Puns</li>
    <li class="option" role="option" id="item2">Riddles</li>
    <li class="option" role="option" id="item3">Observations</li>
    <li class="option" role="option" id="item4">Knock-knock</li>
    <li class="option" role="option" id="item5">One liners</li>
  </ul>
</div>

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# combobox
Unknown specification

Siehe auch