aria-autocomplete

Hvornår bruges den

På en brugerdefineret role="combobox" eller role="textbox", der tilbyder forslag, mens brugeren skriver. Attributten fortæller hjælpeteknologi, hvilken slags autofuldførelses-adfærd der kan forventes, så brugeren kan forudse, om de skal kigge i selve input-feltet, i en popup-liste eller begge steder.

Placer den ikke på en simpel native <input type="text"> uden forslagsmekanisme — der er intet at annoncere.

Denne attribut forveksles ofte med HTML-attributten autocomplete. De er urelaterede. HTML autocomplete ("email", "current-password", "street-address", …) fortæller browseren, hvordan feltet udfyldes. aria-autocomplete fortæller hjælpeteknologi, hvilket UI-mønster udvikleren har implementeret. Begge kan fremgå af det samme input og konflikter ikke.

Hvordan den fungerer

Accepterer fire tokenværdier:

• "none" — standarden. Tekstboksen autofuldføres ikke. Du behøver normalt ikke at sætte dette eksplicit.
• "inline" — når brugeren skriver, tilføjes den foreslåede tekst til selve input-feltet, typisk markeret, så næste tastetryk kan overskrive det.
• "list" — forslag vises i en separat popup (normalt en role="listbox"). Input-værdien ændres ikke automatisk.
• "both" — begge dele på én gang: popup-listen er synlig og det øverste forslag indsættes inline i input-feltet.

Brug den værdi, der svarer til, hvad din implementation faktisk gør. Hvis din komboboks viser en dropdown med valgmuligheder, men ikke ændrer input-feltet, mens brugeren skriver, er det "list", ikke "both".

Hyppige fejl

• Forveksle den med HTML-attributten autocomplete. De ligner hinanden, gør forskellige ting, og du har som regel brug for begge.
• Sætte aria-autocomplete="list" uden også at sætte aria-controls til at pege på listboksen og aria-expanded til at spore åben/lukket.
• Sætte aria-autocomplete="both", når input-feltet aldrig udfyldes automatisk. Brugeren hører affordancen og venter på et inline-forslag, der aldrig kommer.
• Placere aria-autocomplete på en kontrol, der ikke er en tekstboks eller komboboks — f.eks. en knap. Attributten ignoreres.
• Glemme at håndtere aria-activedescendant for den fremhævede valgmulighed i listen. Brugeren hører, at der er forslag, men kan ikke se, hvilken der aktuelt er aktiv.
• Hardkode aria-autocomplete="list" uden at kontrollere skærmlæseroutput. Mange hjælpeteknologier har inkonsistente annonceringsmønstre, og det forkerte token giver forvirrende formuleringer.

Eksempel

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