Rekommendationer för ordförslagLänk hit

• Ge dynamiska ordförslag i sök- och inmatningsfält
• Ge förslag på alternativa sökord och stavningar efter sökning
• Ge statiska ordförslag på rätt sätt

Ge dynamiska ordförslag i sök- och inmatningsfältLänk hit

Förslag på ord eller fraser i ett sök- eller inmatningsfält kan underlätta för användaren att fylla i rätt information.

Ibland kan webbläsaren automatiskt ge användaren relevanta förslag på inmatning, tack vare att den känner igen vilken typ av inmatningsfält det gäller och kommer ihåg vad användaren tidigare skrivit i liknande fält. Se Märk upp vanliga formulärfält i koden (R153).

I andra fall kan du som publicerar sidan skapa funktioner som hämtar relevanta förslag från annat håll:

Utforma funktionen exempelvis med av en rullgardinsmeny så att en ruta fälls ned under sökfältet efter att användaren har fyllt i några tecken i sökfältet.

Rutan som fälls ner kan innehålla förslag på längre ord eller begrepp som innehåller de tecken som användaren redan fyllt i. Det är ett sätt att visa vad som går att söka på, men funktionen fungerar även som interaktiv stavningshjälp.

De olika förslagen på sökord kan till exempel hämtas från manuellt förberedda listor med termer som är viktiga i sammanhanget, eller genereras automatiskt baserat på indexerad text på webbplatsen. Ge gärna förslag som motsvarar synonymer till inmatade ord, liksom korrigeringar av vanliga felstavningar av de indexerade orden.

Tänk på att användaren förväntar sig att en sökning på de rekommenderade ordförslagen ska resultera i bra sökträffar. Prova själv att söka på de vanligaste sökfrågorna och arbeta redaktionellt för att dessa ska leda till användbar information. Kontrollera besöksstatistiken och sökbeteendet regelbundet.

Ordförslag är värdefulla vid sökning, men även inmatningsfält av andra slag kan förbättras med samma typ av lösning. Till exempel kan inmatning i fält för gatuadress kontrolleras mot en adressdatabas. Det minskar risken för att användaren registrerar en gatuadress som inte existerar eller är tvetydig eller felstavad.

Förutom förslag på sökord kan sökresultat (sidtitlar) presenteras direkt i den dynamiska listan. Det kan gälla till exempel sidor om produkter, dokument eller nyheter. Se exempel från Västra Götalandsregionen. På så vis slipper användaren gå via en särskild sökresultatsida och kan snabbare komma fram till målet. Detta upplägg är mest användbart när sannolikheten för att visa rätt länk är stor, till exempel då antalet matchande sidor är litet, eller då det finns matchande sidor som är mycket populära.

Var noga med interaktionsdesign vid dynamiska ordförslag!

Ge förslag på alternativa sökord och stavningar efter sökningLänk hit

Många användare ändrar sin sökfråga några gånger för att successivt förbättra sökresultatet. Därför är det värdefullt om en ny sökruta med aktuell sökfråga förifylld presenteras i anslutning till sökresultaten.

Användare kan få hjälp att förbättra sin sökfråga (till exempel rätta en felstavning) genom att alternativa sökord presenteras i anslutning till denna sökruta. Genom att dessa presenteras som länkar eller knappar, till exempel efter orden ”Menade du”, kan användaren välja dem utan att ens behöva använda inmatningsfältet.

Ordförslag efter sökning kan i princip skapas på samma sätt som som dynamiska sökförslag under pågående inmatning, men en närmare analys av det aktuella fallet bör avgöra utformningen. Eventuellt kan det vara lämpligt att indikera när en felstavning tycks ha inträffat, på ett annat sätt än t.ex. förslag på synonymer.

Ordförslag efter sökning samt markeringar av felstavningar, till exempel genom röda understrykningar, är särskilt värdefulla för användare som inte ser på skärmen under inmatning (utan till exempel tittar på tangentbordet för att kunna träffa rätt tangent). Men även den som ser inmatningen kan behöva stavningshjälp.

Exempel: Bilden visar hur man på Myndigheten för delaktighet presenterar alternativa sökningar som länkar för att underlätta för användarna att rätta till felstavningar utan att behöva använda sökfältet.

En sådan funktion underlättar för användaren att rätta till fel, vilket rekommenderas av framgångskriteriet 3.3.3 i WCAG 2.0.

Som underlag för förslag på alternativa sökord kan ordlistor användas, men även produktdatabaser, synonymordlistor, taxonomier och så kallade ontologier, från vilka under- eller överordnade begrepp kan hämtas. Följande är ett påhittat exempel på hur det kan se ut:

Använd statiska textförslag på rätt sättLänk hit

Statiska exempeltexter kan presenteras i anslutning till inmatningsfältet eller inuti inmatningsfältet innan användaren själv skrivit in någonting där. Det sistnämnda kallas för platshållartext (placeholder på engelska). Statiska textförslag kan hjälpa användaren att förstå vilken information eller vilket format som förväntas i fältet. Det bästa är om systemet kan utformas så att alla tänkbara inmatningsalternativ fungerar (se R57 Låt användarna fylla i information i valfritt format). Men när detta inte är möjligt är exempeltexter ett bra sätt att hjälpa användaren att undvika misstag i inmatning (vilket riktlinje 3.3 i WCAG 2.0 förespråkar).

Exempel: Statiska textförslag kan visas vid sidan av inmatningsfält eller som platshållartexter.

Det är viktigt att en eventuell platshållartext inte används istället för etikett (label) eftersom den försvinner när användaren börjat fylla i text. Då blir det svårt för en användare som är osäker på fältets syfte att ta reda på detta utan att radera inmatad text, alternativt ladda om sidan. Platshållartext bör inte användas för information som är nödvändig för användaren, eftersom det finns situationer då platshållartexten inte presenteras för användaren överhuvudtaget (till exempel vid användning av vissa skärmläsare). Läs vidare om etiketter i R55 Skapa tydliga och klickbara fältetiketter.

Inte heller bör en platshållartext utformas så att den kan förväxlas med en förifylld sökfråga, eftersom det kan leda till att användaren lämnar fältet utan information trots att hen faktiskt skulle haft nytta av att fylla i fältet.

Var noga med interaktionsdesign vid dynamiska ordförslagLänk hit

Ge ordförslag vid rätt tillfälle

Av effektivitets- och prestandaskäl är det ofta bra att vänta tills användaren matat in två-tre tecken eller har slutat skriva innan förslagen på sökord presenteras. Eftersom varje enskilt tecken kan förekomma i mängder av olika sökord riskerar man annars att långa listor med irrelevanta förslag behöver överföras och presenteras i samband med att sökningen påbörjas. I undantagsfall kan dock redan det första tecknet användas som grund för förslag på sökord, framför allt om underliggande data inte är så omfattande.

Underlätta för besökare som använder förstoring och skärmläsare

För användare som använder kraftig förstoring (eller en mycket liten skärm) kan rutan med sökordsförslag befinna sig utanför synligt område. Om ordförslagen dyker upp medan användaren skriver finns därför en risk att användaren inte alls märker det.

Med hjälp av skärmläsare kan dessa användare bli informerade om den dynamiska förändringen – men bara om sidan innehåller kod som tydligt beskriver sökfunktionens egenskaper för skärmläsaren. Detta kan göras med hjälp av tillgänglighetsstandarden WAI-ARIA. Se Se till att hjälpmedel kan presentera meddelanden som inte är i fokus (R164).

För en person som använder skärmläsare kan det dock bli tjatigt att hela tiden bli meddelad vid varje tangenttryckning att sökordsförslagen har uppdaterats. Här kan funktionen programmeras med en viss fördröjning så att sökresultaten först uppdateras när användaren inte tryckt ner en tangent på en halv sekund.

Se till att det går att navigera med tangentbordet

Se till att det går att använda sig av tangentbordet för att navigera, välja i och stänga listor med ordförslag. Det vanligaste är att användarna förväntar sig att kunna använda piltangenterna, tab, escape och enter/retur för att interagera med listan. Om användaren väljer att stänga eller gå till ett av förslagen i listan ska tangentbordsfokus hamna i textfältet igen så att hen kan navigera sig vidare till nästa del av sidan.

För återkommande användares skull bör det finnas möjlighet att inaktivera funktionen som ger förslag på sökord. Funktionen kan nämligen upplevas som ett hinder för dessa användare. Den som navigerar med tangentbord kan t.ex. bli stressad av alltför många tangenttryckningar fram till själva sökresultatet.

Andra webbriktlinjer som är särskilt viktiga vid dynamiska ordförslag

Använd landmärken/roller i HTML-koden så att användare kan hoppa direkt till sökresultatet. Läs mer i R75 Gör det möjligt att hoppa förbi delar på sidorna.

Tänk på att inte sänka tillgängligheten för vissa grupper när du höjer användbarheten för andra. Följ gärna designprincipen om progressiv förbättring för att undvika detta. Läs vidare i R93 Använd JavaScript för att öka tillgängligheten – inte tvärtom.

För att underlätta för personer som använder skärmläsare ska alla formulärfält ha en fältetikett. I undantagsfall kan attributet aria-label användas på inmatningsfältet istället men ett label-element är att föredra då det har bättre stöd. Läs mer om etiketter i R55 Skapa tydliga och klickbara fältetiketter.

MätningLänk hit

• Kontrollera att det går att navigera med tangentbordet även i menyn som presenterar förslag på sökord.
• Kontrollera att de förslagen på sökord som ni presenterar för användarna ger relevanta sökträffar. Se artikeln Följ upp hur webbplatsen används.

Tips på verktygLänk hit

Google Accessibility Developer Tools kan ge förslag på om wai-aria är felaktigt (men kan inte verifiera att upplevelsen för användaren blir som tänkt).

Fördjupning och relaterade riktlinjerLänk hit

• W3Cs rekommendationer för wai-aria vid sökordsförslag
• Exempel på autocomplete med wai-aria
• Fyll formulär med kända uppgifter (R52)
• Designmönster för dynamiska ordförslag
• Om behovet: Stöd för rättstavning i sök- och inmatningsfält efterlystes av många användare i PTS kartläggning av IKT-behov hos personer med funktionsnedsättning, och betydelsen för dyslektiker har studerats av forskare.

TerminologiLänk hit

Dynamiska ordförslag i inmatningsfält kallas ofta ”autocomplete” eller ”type ahead” på engelska. Även uttrycket ”tab completion” förekommer, om användaren kan välja ett sökordsförslag genom att trycka på tab-tangenten.

Fältetikett – HTML label-element som förklarar vilken information som ska anges i till exempel ett inmatningsfält.

Platshållartext kallas på engelska och i html-kod för ”placeholder text”. Ibland placeras motsvarande vägledning i så kallade tooltips, det vill säga hjälptexter som visas när användaren fokuserar på ett element.

Landmärke heter ”landmark” i kod och på engelska.

För att styra format på indata används, förutom exempeltexter, även indatakontroll (validering) som till exempel kan kontrollera att indata matchar indatamask/verifieringsuttryck/reguljärt uttryck (regular expression). Ibland görs även dynamiska uppslagningar som en del av valideringen för att kontrollera att indata motsvarar verkliga förhållanden.

Ett viktigt syfte med sökordsförslag är att de kan underlätta rättstavning genom att erbjuda stavningshjälp. Detta är värdefullt för alla, men kanske särskilt för personer med dyslexi eller andra läs- och skrivsvårigheter.

WAI ARIA – Web Accessibility Initiative – Accessible Rich Internet Applications. Se sidan med en introduktion till ARIA.