Riktlinjer

• Låt formulärelementen behålla standardutseendet.
• Gör användningstester för att kontrollera att formulären fungerar, om ni trots allt ändrar utseendet.
• Anpassa storleken på textfält till förväntat innehåll.

• Överväg att automatiskt fylla i uppgifter i formulär. Det kan ske om en användare redan tidigare har lämnat uppgifter till er, eller om uppgifterna kan hämtas från annat håll.
• Ta hänsyn till riskerna med färdigifyllda uppgifter.
• Ge användarna möjlighet att ta bort eller ändra uppgifterna själv i formuläret eller gör det enkelt för dem att ta kontakt med er för att påpeka om uppgifterna är inaktuella eller felaktiga.

• 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

• Välj lämpliga kanaler för att meddela användarna att status i ett ärende har ändrats.
• Användarna ska kunna granska sina uppgifter och få en kvittens. Kvittensen bör kompletteras med ett e-brev.
• Användarna ska få ett mottagningsbevis från den organisationen som fått deras uppgifter.

• Tänk igenom vilka beroenden som finns mellan uppgifterna som ska fyllas i. Placera fält med uppgifter som användaren har nytta av när han eller hon fyller i andra fält på samma sida. Även ska information som krävs för att kunna fatta ett beslut finnas på samma sida samt uppgifter som styr övrig information som ska fyllas i.
• Dela upp formuläret på flera sidor om det är omfattande och innehåller många fält som användaren ska fylla i.
• Visa vilket steg användaren befinner sig på samt hur många steg som återstår när formuläret sträcker sig över flera sidor, till exempel ”Steg 1 av 3: Dina kontaktuppgifter”. (Se även R63. Hjälp användaren att förstå var hon befinner sig i en process.)

• Namnge knappar så att användarna förstår vad som händer när de klickar på dem.
• Ge knapparna en logisk och användbar placering.
• Använd lagom många knappar.
• Presentera inte knappens text enbart som bild.

• Låt användarna fylla i information i valfritt format.
• Undvik att visa felmeddelanden om det går att lösa behovet med programmering.
• Skapa kontrollfunktioner som ger informationen rätt format.
• Låt systemet ta bort oönskade tecken.

• Använd en bild av en asterisk (*) för att markera ett obligatoriskt fält i ett formulär. Den ska placeras före inmatningsfältet, i label-elementet. Låt bilden ha textekvivalenten alt=”obligatoriskt”.
• Informera användarna före formuläret genom att skriva till exempel ”Fält markerade med * är obligatoriska och måste fyllas i”.
• Använd den uppmärkning av obligatoriska fält som fungerar med den html-version du valt.

• Minimera antal fält i formulären genom att slå ihop flera fält till ett, till exempel för- och efternamn eller gatunamn och nummer.
• Gör det så tydligt som möjligt vilka fält som är obligatoriska. Gruppera dem gärna, så att användarna sedan enkelt kan hoppa över frivilliga fält.

Ett annat upplägg är att först bara visa de obligatoriska fälten. När användaren har fyllt i dem visas de frivilliga fälten.

• Använd attributet autocomplete på inmatningsfält.
• Beskriv förväntat innehåll med attributet autocomplete, om det finns en standardiserad benämning.
• Ange autocomplete=”off” om det gäller känslig information eller om servern erbjuder ordförslag.

• Skriv tydliga och informativa fältetiketter
• Koppla ihop fältetikett och inmatningsfält så att även etiketten blir klickbar.
• Placera fältetiketterna där användarna lätt ser dem.
• Skriv utförliga instruktioner före formuläret, när sådana behövs.
• Undvik att göra lösningen beroende av title-attribut och placeholder-texter.

• Utför bara förändringar (till exempel öppning av fönster eller förändring av värde) när användaren har anledning att förvänta sig dem.

• Sammanfatta felen och använd en layout som tydligt separerar felmeddelanden från resten av webbplatsens design.
• Skriv välformulerade felmeddelanden så ökar chansen att användarna gör rätt från början.
• Markera fel och felmeddelanden med WAI-ARIA så att de uppfattas tydligt av användare med hjälpmedel.
• Spara det som inte är fel.

• Visa och beskriv för användarna var de befinner sig i processen.
• Använd tydliga bilder och pilar, till exempel en så kallad processfisk, så att användarna får en överblick av processen.