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
Ui-kittet
Riktlinjer
- 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.
Bra att tänka på
- Punktlista
Tillgänglig komponent
- I input-fältet anger du attributet
aria-autocomplete="list"
på inmatningsfält. Är informationen känslig så använd iställetautocomplete="off"
för att stänga av webbläsarens inbyggda autocomplete.
Tangentbordsnavigering
- 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
Skärmläsare
- När sökfältet får fokus läses en instruktion upp.
- När användaren får sökresultatet ska antalet träffar läsas upp
- När användaren pilar sig genom förslagen läses de upp
Aria
- 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 attributaria-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">