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

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ället autocomplete="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 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">