aria-autocomplete

Wann zu verwenden

Auf einem benutzerdefinierten role="combobox" oder role="textbox", das beim Tippen Vorschläge anbietet. Das Attribut teilt der assistiven Technologie mit, welche Art von Autovervollständigungs-Verhalten zu erwarten ist, damit die Nutzenden antizipieren können, ob sie im Eingabefeld selbst, in einer Popup-Liste oder an beiden Stellen nachsehen müssen.

Es sollte nicht auf einem einfachen nativen <input type="text"> ohne Vorschlagsmechanismus gesetzt werden — es gibt nichts anzukündigen.

Dieses Attribut wird häufig mit dem HTML-Attribut autocomplete verwechselt. Sie sind nicht verwandt. HTML autocomplete ("email", "current-password", "street-address", …) teilt dem Browser mit, wie das Feld befüllt werden soll. aria-autocomplete teilt der assistiven Technologie mit, welches UI-Muster die Entwickelnden implementiert haben. Beide können auf demselben Eingabefeld erscheinen und stehen nicht in Konflikt miteinander.

Verhalten

Das Attribut akzeptiert vier Token-Werte:

• "none" — der Standard. Das Textfeld vervollständigt nicht automatisch. Dieser Wert muss in der Regel nicht explizit gesetzt werden.
• "inline" — während des Tippens wird vorgeschlagener Text direkt in das Eingabefeld eingefügt, typischerweise markiert, sodass der nächste Tastendruck ihn überschreiben kann.
• "list" — Vorschläge erscheinen in einem separaten Popup (üblicherweise ein role="listbox"). Der Eingabewert ändert sich nicht automatisch.
• "both" — beides gleichzeitig: die Popup-Liste ist sichtbar und der beste Vorschlag wird in das Eingabefeld eingetragen.

Es sollte der Wert verwendet werden, der dem tatsächlichen Verhalten der Implementierung entspricht. Zeigt die Combobox eine Dropdown-Liste, ohne das Eingabefeld beim Tippen zu verändern, ist das "list", nicht "both".

Häufige Fehler

• Verwechslung mit dem HTML-Attribut autocomplete. Sie sehen ähnlich aus, tun unterschiedliche Dinge, und beide werden in der Regel benötigt.
• aria-autocomplete="list" setzen, ohne zugleich aria-controls auf die Listbox zu setzen und aria-expanded zur Verfolgung von geöffnet/geschlossen zu verwenden.
• aria-autocomplete="both" setzen, wenn das Eingabefeld nie automatisch befüllt wird. Die Nutzenden hören die Ankündigung und warten auf einen eingebetteten Vorschlag, der nie erscheint.
• aria-autocomplete auf einem Steuerelement setzen, das weder ein Textfeld noch eine Combobox ist — zum Beispiel ein Button. Das Attribut wird ignoriert.
• aria-activedescendant für die markierte Option in der Liste nicht zu verwalten. Die Nutzenden hören, dass Vorschläge vorhanden sind, können aber nicht erkennen, welcher gerade aktiv ist.
• aria-autocomplete="list" fest zu kodieren, ohne die Ausgabe von Screenreadern zu prüfen. Viele assistive Technologien haben inkonsistente Ankündigungsmuster, und ein falscher Token-Wert führt zu verwirrenden Formulierungen.

Beispiel

<label for="city">City</label>
<input
  id="city"
  role="combobox"
  type="text"
  autocomplete="address-level2"
  aria-autocomplete="list"
  aria-controls="city-listbox"
  aria-expanded="true"
  aria-activedescendant="city-opt-3"
>
<ul id="city-listbox" role="listbox">
  <li id="city-opt-1" role="option">Bristol</li>
  <li id="city-opt-2" role="option">Birmingham</li>
  <li id="city-opt-3" role="option">Brighton</li>
</ul>