aria-autocomplete

Kiedy używać

Na własnym role="combobox" lub role="textbox", który oferuje sugestie podczas wpisywania przez użytkownika. Atrybut informuje technologię asystującą, jakiego rodzaju zachowania autouzupełniania oczekiwać, by użytkownik mógł przewidzieć, czy szukać w samym polu, w wyskakującej liście, czy w obu.

Nie umieszczaj go na zwykłym natywnym <input type="text"> bez mechanizmu sugestii — nie ma nic do ogłoszenia.

Ten atrybut jest często mylony z atrybutem HTML autocomplete. Są one niezwiązane ze sobą. HTML autocomplete ("email", "current-password", "street-address", …) mówi przeglądarce, jak wypełnić pole. aria-autocomplete mówi technologii asystującej, jaki wzorzec interfejsu zaimplementował deweloper. Oba mogą pojawić się na tym samym polu i nie kolidują ze sobą.

Jak działa

Przyjmuje cztery wartości tokenów:

• "none" — wartość domyślna. Pole tekstowe nie autouzupełnia. Zazwyczaj nie musisz tego ustawiać jawnie.
• "inline" — podczas wpisywania przez użytkownika sugerowany tekst jest dołączany do samego pola, zazwyczaj zaznaczony, by następne naciśnięcie klawisza mogło go zastąpić.
• "list" — sugestie pojawiają się w osobnym wyskakującym oknie (zazwyczaj role="listbox"). Wartość pola nie zmienia się automatycznie.
• "both" — oba jednocześnie: widoczna jest lista wyskakującego okna i najlepsza sugestia jest wbudowana w pole.

Użyj wartości odpowiadającej temu, co Twoja implementacja faktycznie robi. Jeśli combobox pokazuje listę rozwijaną opcji, lecz nie modyfikuje pola podczas wpisywania, to jest "list", a nie "both".

Częste błędy

• Mylenie z atrybutem HTML autocomplete. Wyglądają podobnie, robią różne rzeczy i zazwyczaj potrzebne są oba.
• Ustawianie aria-autocomplete="list" bez ustawiania aria-controls wskazującego listbox i aria-expanded śledzącego otwarty/zamknięty stan.
• Ustawianie aria-autocomplete="both", gdy pole nigdy nie autouzupełnia. Użytkownik słyszy dostępność i czeka na wbudowaną sugestię, która nigdy nie pojawia się.
• Umieszczanie aria-autocomplete na formancie, który nie jest polem tekstowym ani comboboxem — na przykład na przycisku. Atrybut jest ignorowany.
• Zapomnienie o zarządzaniu aria-activedescendant dla podświetlonej opcji na liście. Użytkownik słyszy, że istnieją sugestie, lecz nie może stwierdzić, która jest aktualnie aktywna.
• Twarde kodowanie aria-autocomplete="list" bez sprawdzania wyników w czytniku ekranu. Wiele technologii asystujących ma niespójne wzorce ogłoszeń, a zły token produkuje mylące sformułowania.

Przykład

<label for="city">Miasto</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>