aria-autocomplete

Кога да се използва

На персонализиран role="combobox" или role="textbox", който предлага предложения по време на въвеждане от потребителя. Атрибутът уведомява помощните технологии за вида на очакваното поведение при автодовършване, така че потребителят може предварително да знае дали да търси в самото поле, в изскачащ списък, или и на двете места.

Не трябва да се поставя на обикновен нативен <input type="text">, който няма механизъм за предложения — няма какво да се обяви.

Атрибутът се бърка честo с HTML атрибута autocomplete. Те не са свързани. HTML autocomplete ("email", "current-password", "street-address", …) казва на браузъра как да попълни полето. aria-autocomplete уведомява помощните технологии за UI модела, имплементиран от разработчика. И двата могат да се появят в едно и също поле и не си противоречат.

Как се държи

Приема четири токен стойности:

• "none" — стойността по подразбиране. Текстовото поле не предлага автодовършване. Обикновено не е необходимо да се задава изрично.
• "inline" — докато потребителят пише, предложеният текст се добавя директно в полето, обикновено маркиран, така че следващото натискане на клавиш да го замени.
• "list" — предложенията се появяват в отделен изскачащ прозорец (обикновено role="listbox"). Стойността в полето не се променя автоматично.
• "both" — и двете едновременно: изскачащият списък е видим и най-доброто предложение се добавя вградено в полето.

Трябва да се използва стойността, която съответства на действителното имплементирано поведение. Ако комбинираната кутия показва падащ списък с опции, но не модифицира полето по време на въвеждане, стойността е "list", а не "both".

Чести грешки

• Бъркане с HTML атрибута autocomplete. Изглеждат сходно, вършат различни неща и обикновено са необходими и двата.
• Задаване на aria-autocomplete="list" без да се зададе и aria-controls, сочещ към listbox-а, и aria-expanded, за проследяване на отворено/затворено състояние.
• Задаване на aria-autocomplete="both", когато полето никога не се попълва автоматично. Потребителят чува за тази функционалност и очаква вградено предложение, което никога не се появява.
• Поставяне на aria-autocomplete на контрола, която не е textbox или combobox — например бутон. Атрибутът се игнорира.
• Пропускане на управлението на aria-activedescendant за маркираната опция в списъка. Потребителят чува, че съществуват предложения, но не може да разбере коя от тях е активна в момента.
• Твърдо кодиране на aria-autocomplete="list" без проверка на изходния сигнал от екранния четец. Много помощни технологии имат непоследователни модели на обявяване и грешният токен води до объркващи съобщения.

Пример

<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>