aria-autocomplete

När du ska använda det

På en anpassad role="combobox" eller role="textbox" som erbjuder förslag medan användaren skriver. Attributet talar om för hjälpmedelsteknik vilken typ av autokompletering som förväntas, så att användaren kan förutse om de ska titta i inmatningsfältet självt, i en popup-lista eller i båda.

Sätt det inte på ett vanligt inbyggt <input type="text"> som saknar förslagsmekanism — det finns inget att meddela.

Det här attributet förväxlas ofta med HTML-attributet autocomplete. De är orelaterade. HTML autocomplete ("email", "current-password", "street-address", …) talar om för webbläsaren hur fältet ska fyllas i. aria-autocomplete talar om för hjälpmedelsteknik vilket UI-mönster utvecklaren har implementerat. Båda kan finnas på samma inmatningsfält utan konflikt.

Hur det fungerar

Accepterar fyra tokenvärden:

• "none" — standard. Textrutan autoavslutar inte. Du behöver vanligen inte ange detta explicit.
• "inline" — när användaren skriver läggs föreslagen text till i inmatningsfältet, vanligen markerad så att nästa tangenttryckning kan skriva över den.
• "list" — förslag visas i en separat popup (vanligen en role="listbox"). Inmatningsvärdet ändras inte automatiskt.
• "both" — båda samtidigt: popup-listan är synlig och det bästa förslaget infogas i inmatningsfältet.

Använd det värde som matchar vad din implementation faktiskt gör. Om din combobox visar en rullgardinslista men inte ändrar inmatningsfältet medan användaren skriver, är det "list", inte "both".

Vanliga fel

• Förväxlar det med HTML-attributet autocomplete. De ser lika ut, gör olika saker och du behöver vanligen båda.
• Sätter aria-autocomplete="list" utan att också sätta aria-controls för att peka på listboxen och aria-expanded för att spåra öppen/stängd.
• Sätter aria-autocomplete="both" när inmatningsfältet aldrig autofylls. Användaren hör möjligheten och väntar på ett inline-förslag som aldrig kommer.
• Placerar aria-autocomplete på en kontroll som inte är en textruta eller combobox — till exempel en knapp. Attributet ignoreras.
• Glömmer att hantera aria-activedescendant för det markerade alternativet i listan. Användaren hör att förslag finns men kan inte avgöra vilket som är aktivt.
• Kodar aria-autocomplete="list" utan att kontrollera skärmläsarens utdata. Många hjälpmedel har inkonsekventa meddelandemönster, och fel token ger förvirrande formuleringar.

Exempel

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