Skjema – hvordan gjøre dem universelt utformet

En god idé for å sørge for et godt utformet skjema er å følge «skjemavettreglene» skrevet av Eszter Horvati og Engebret Gudbrandson i 2018 i forbindelse med en intern konferanse:

 

• Spør kun om det du trenger: trenger du virkelig alle punktene, og hvor mye personlig informasjon er egentlig nødvendig?
• Gjør det enkelt: bruk klarspråk, og minimer brukers innsats i å forstå. 
• Balanser innsats mot resultat: hvor komplekst er skjemaet i forhold til hva hensikten bak det er.
• Gi oversikt: angi forventet tidsbruk, fortell hvor hun er i prosessen og oppsummer, blant annet. 
• Ikke stol på at noe blir lest! Skjemaet må være selvforklarende.
• Rekkefølge er viktig: Ta det viktigste først og sørg for logisk gruppering.
• Velg riktig boks: Vær bevisst på skjemaobjektet du velger for spørsmålet.
• Test på ekte brukere: Test tidlig, og én er bedre enn ingen!

I tillegg til disse er det også andre viktige punkter når det gjelder skjema, slik at de blir enkle, forståelige og smidige å fylle ut. 

 

Lesbarhet

Plasser skjemaobjektene under hverandre (i riktig rekkefølge selvfølgelig), da blir det enklere å lese, og i tillegg er det bra for personer som benytter seg av forstørrende hjelpemidler, for de må ikke flytte seg langt til høyre for å sjekke om det er flere ting der de skal svare på – kun nedover!

 

De aller fleste av oss leser ovenfra og ned. Derfor er det også best at ledeteksten kommer først, slik at man vet hva som skjer på neste steg. I tillegg blir det ingen forvirring om hvilken ledetekst som hører til hvilket objekt.

Et annet poeng er at skjemaobjektet ligger under ledeteksten, så blir det enklere å koble ledeteksten til riktig skjemafelt.

Plasser også ledeteksten nærme skjemaobjektet, da blir det enda litt enklere å koble de sammen.

 

Forståelige skjemaobjekter 

Dette går litt under «Gjør det enkelt» som skjemavettreglene sier. Gjør det lett for brukerne å forstå hva slags skjemaobjekt de driver med. Er det radioknapper skal de se ut som radioknapper, og brukeren forstår da fra tidligere skjemautfyllinger at de kun kan velge ett alternativ. Skal de kunne velge flere skal objektene se ut som avkryssingsbokser. 

 

Konsekvent plassering

Ofte går samme skjemaløsning igjen på et nettsted, og det er bra, for da lærer brukerne seg hvordan det brukes. Men da er det også viktig at man er konsekvent med plassering av for eksempel knapper. Lagre- og avbryt-knappene bør ligge i samme rekkefølge og ha samme plassering på siden. Ellers kan brukerne ende opp med å gjøre feil fordi de klikker automatisk der de klikket sist for å sende inn skjemaet.

 

Kontraster

I WCAG 2.1 er det krav til kontrast på rammen rundt skjemaobjektet, som rammen som markerer innskrivingsfelt, radioknapper, knapper og lignende. Denne må ha en kontrast på 3.0:1. Eksempler på godkjente og ikke godkjente løsninger ligger i lenken om kontrast for ikke-tekstlig innhold som ligger nederst i artikkelen. 

 

Annet

Obligatoriske felt

Som i skjemavettreglene – spør kun om det du trenger. Alt bør være obligatorisk, hvis ikke er det kanskje ikke viktig nok. Men dersom det likevel er noe som skal med, men som ikke er obligatorisk, så skriv heller at disse er frivillige. Nielsen Norman Group anbefaler i artikkelen «Marking Required fields in forms» at også obligatoriske skjemaobjekt markeres for å minimere innsatsen brukerne må legge på å fullføre et skjema.

 

Viktige skjema

I viktige skjema bør brukeren ha mulighet til å lese igjennom før de sender inn. Dette kan være skjema som er knyttet til juridiske eller finansielle formål.

 

Inaktive knapper

Ikke gjør knapper inaktive! Knapper er gjerne inaktive fordi skjemaet ikke er ferdig utfylt, men gi brukeren mulighet til å klikke og presenter dem for hvilke feil som finnes. Det er mye tydeligere hva som da er feil enn om de sitter og prøver å klikke på en knapp som ikke funker mens de klør seg i hodet. 

 

Feilmeldinger

Noe man ikke må glemme er feilmeldinger. 

• Alle feil beskrives i tekst, bruk ikke kun farge for å vise feil. Bruk gjerne begge deler, og også gjerne ikon!
• Gi brukeren en oversikt over feil som finnes i skjemaet i en felles feilmelding øverst i skjemaet
• Feilmeldinger vises ved respektive skjemaobjekt.
• Forklar så godt som mulig hva feilen er og hvordan den kan rettes

 

Teknisk

Dette kan dere nok, men tar med et par viktige punkter

• Koble ledeteksten til skjemaobjektet ved hjelp av for- og id-attributtene. På denne måten får også skjermleserbrukere med seg hva som skal fylles inn i feltet.
• Koble også hjelpetekster til skjemaobjektet. 
• Alle grupperinger, som for eksempel radioknapper og avkryssingsbokser er også gruppert i koden. Dette gjøres med <fieldset> og <legend>. 
• Bruk korrekt skjemakode. En knapp kodes med button-elementet, radioknapper med type=”radio” og så videre (det finnes også andre løsninger, for eksempel WAI-ARIA dersom det behøves).
• Bruk autocomplete attributter, dette forenkler utfylling for brukerne. 
• Feilmeldinger er også koblet til respektive skjemaobjekt i koden. Dette kan for eksempel gjøres ved å legge feilmeldingen i label-elementet.

Mye av dette er utdypet på Difi sine sider om Skjema.

Lenker

Skjema, difi (åpnes i nytt vindu)

1.4.11 Kontraster for ikke-tekstlig innhold, difi (åpnes i nytt vindu)

Marking required fields in forms (åpnes I nytt vindu)