aria-autocomplete

Wanneer gebruiken

Op een aangepaste role="combobox" of role="textbox" die suggesties biedt terwijl de gebruiker typt. Het attribuut vertelt hulptechnologie welk soort autocomplete-gedrag verwacht kan worden, zodat de gebruiker kan anticiperen of de suggestie in het invoerveld zelf verschijnt, in een popup-keuzelijst of in beide.

Gebruik het niet op een gewone native <input type="text"> zonder suggestiemechanisme — er is niets aan te kondigen.

Dit attribuut wordt vaak verward met het HTML-attribuut autocomplete. Ze zijn niet gerelateerd. Het HTML-attribuut autocomplete ("email", "current-password", "street-address", …) vertelt de browser hoe het veld ingevuld moet worden. aria-autocomplete vertelt hulptechnologie welk UI-patroon de ontwikkelaar heeft geïmplementeerd. Beide kunnen op hetzelfde invoerveld staan en conflicteren niet.

Gedrag

Accepteert vier tokenwaarden:

• "none" — de standaard. Het tekstvak vult niet automatisch aan. Dit hoeft doorgaans niet expliciet te worden ingesteld.
• "inline" — terwijl de gebruiker typt, wordt voorgestelde tekst aan het invoerveld zelf toegevoegd, doorgaans geselecteerd zodat de volgende toetsaanslag deze kan overschrijven.
• "list" — suggesties verschijnen in een aparte popup (doorgaans een role="listbox"). De invoerwaarde verandert niet automatisch.
• "both" — beide tegelijk: de popup-keuzelijst is zichtbaar en de beste suggestie wordt in het invoerveld ingevoegd.

Gebruik de waarde die overeenkomt met wat de implementatie daadwerkelijk doet. Als een combobox een dropdown met opties toont maar het invoerveld niet aanpast terwijl de gebruiker typt, is dat "list", niet "both".

Veelvoorkomende fouten

• Het verwarren met het HTML-attribuut autocomplete. Ze lijken op elkaar, doen verschillende dingen, en doorgaans zijn beide nodig.
• aria-autocomplete="list" instellen zonder ook aria-controls te wijzen naar de listbox en aria-expanded bij te houden voor open/gesloten.
• aria-autocomplete="both" instellen terwijl het invoerveld nooit automatisch wordt aangevuld. De gebruiker hoort de mogelijkheid en wacht op een inline suggestie die nooit verschijnt.
• aria-autocomplete op een besturingselement plaatsen dat geen tekstvak of combobox is — bijvoorbeeld een knop. Het attribuut wordt genegeerd.
• Vergeten aria-activedescendant te beheren voor de gemarkeerde optie in de lijst. De gebruiker hoort dat er suggesties bestaan maar kan niet zien welke momenteel actief is.
• aria-autocomplete="list" hard coderen zonder de uitvoer van schermlezers te controleren. Veel hulptechnologieën hebben inconsistente aankondigingspatronen, en het verkeerde token leidt tot verwarrende formuleringen.

Voorbeeld

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