Autokomplettering

Autokomplettering (Autocomplete) används för att hjälpa användaren att fylla i inmatningsfält genom att visa relevanta inmatningsförslag.

Visuella exempel

När användren börjar skriva så ska alla alternativ som börjar med texten eller där textsträngen ingår i ett ord visas.
Användaren kan förflytta sig upp och ner i listan över förslag genom att använda tangentbordets piltangenter.
När användaren har pilat sig ner till det sista förslaget i listan och trycker pil-ner så hoppar fokus in i inmatningsfältet igen. Nästa pil-ner markerar det första förslaget. Markeringen "loopar" inmatningsfält -> alternativen -> inmatningsfält.
Användaren väljer alternativ geom att klicka i listan eller genom att pila sig till önskat alternativ och där trycka Enter för att välja.
Användaren stänger autocomplete-funktionen med Esc-tangenten eller genom att klicka utanför inmatningsfältet/förslagslistan.
Ska systemet hantera känslig information i input-fältet anger du attributet autocomplete=”off” , då kommer även webbläsarens inbyggda autocomplete att stängas av.

I input-fältet anger du attributet aria-autocomplete="list" på inmatningsfält. Är informationen känslig så använd istället autocomplete="off" för att stänga av webbläsarens inbyggda autocomplete.

UPP- och NED-pil går igenom de automatiska förslagen
ESC stänger menyn
ENTER väljer förslaget som har fokus och stänger menyn.
TAB väljer förslaget som har fokus, stänger menyn och flyttar fokus till nästa fokuserbara element

Använd aria-describedby="instruktion" på inputfältet för att möjliggöra instruktion för skärmläsare när fältet får fokus. Inmatningsfältet ska även ha dessa attribut aria-owns="resultat" aria-expanded="false" aria-autocomplete="both" aria-activedescendant=""
Förslagslistan bör kodas som en lista och behöver följande attribut: <ul id="resultat" role="lista"><li id="" role="option" aria-selected="false">