Frivillige og obligatoriske felt

Skrevet av: Morten Tollefsen

Målet når vi lager skjemaer er at de som skal fylle ut forstår det de blir spurt om. Gode ledetekster er viktige, og det skal ikke være tvil om hvilke felt som må fylles ut. Forståelige feilmeldinger er et annet viktig element i god skjemadesign, og det er også antall felt på hver side og mye annet. Her skal jeg imidlertid begrense meg til å si litt om obligatoriske og frivillige felt.

Jeg synes at det er interessant at noe så enkelt som merking av obligatoriske og frivillige felt har såpass mange svar. Håper du på en fasit med hensyn til hva som er perfekt er dette feil artikkel: det finnes sannsynligvis ikke en slik fasit. Det jeg imidlertid gjør er å komme med noen helt personlige betraktninger i tillegg til å si litt om hvem som mener hva.

I denne artikkelen bruker jeg «ledetekst», og da mener jeg <label>.

Dropp frivillige felt

En ganske utbredt holdning et at «det du ikke trenger skal du ikke spørre om i et skjema». Det kan være fristende å si at alle felt alltid skal være obligatoriske, men det kan selvsagt bli litt klønete det også.

I et påmeldingsskjema jeg brukte for en liten stund siden skulle jeg legge inn navn, epost, organisasjon og spesielle behov i forhold til mat. I hodet mitt var det da helt opplagt at mat-feltet kunne stå tomt da jeg sendte inn skjemaet. Ingen felt var merket, hverken som frivillige eller obligatoriske. Jeg trykket send og fikk da beskjed om at feltet med spesielle behov i forhold til mat måtte fylles ut. For å komme videre måtte jeg skrive «nei» i mat-feltet, altså at jeg ikke har spesielle behov i forhold til mat. Kanskje intensjonen nettopp var at alle skulle besvare spørsmålet, men jeg forventet meg altså at feltet var frivillig. Det samme gjelder en del andre felt, for eksempel: Har du andre kommentarer; Vil du utdype svaret; Har du forslag til forbedringer; …

En måte å beholde kun obligatoriske felt og samtidig gjøre det mer intuitivt (for meg) hadde vært et ja/nei spørsmål om spesielle matbehov. Svarte jeg ja kunne det ha dukket opp et tekstfelt der behovet kunne beskrives.

Har du bare obligatoriske felt holder det å skrive «Alle felt skal fylles ut» i starten av skjemaet. Denne informasjonen kan gjentas i alle skjermbilder. Dette er praksis blant annet i NAV [1], mens for eksempel Skatteetaten[2] skriver at «Alle felt må fylles ut» kun i starten av skjemaet.

Selv om det virker som om det å merke obligatoriske felt er litt på vei ut finnes det absolutt de som mener at obligatoriske felt alltid skal merkes, for eksempel Nielsen Norman Group[6]. Deque[4] mener også at alle obligatoriske felt skal merkes.

Jeg bruker skjermleser, og for meg er faktisk «minst mulig informasjon» best. Derfor liker jeg Skatteetatens tilnærming. Mine preferanser er selvsagt ikke nødvendigvis best for alle, og sannsynligvis vil mange overse beskjeder av typen «Alle felt skal fylles ut». Spørsmålet blir da hvor opplagt det er at feltene faktisk må fylles ut, og hvor stor krise det er dersom brukeren får en beskjed i etterkant (for eksempel ved klikk på Neste-knappen eller Send-knappen) om at ett eller flere felt må fylles ut? Det finnes ulike målgrupper og ulike behov for tydeliggjøring av frivillig og obligatorisk. Jeg personlig tviler på at det blir vesentlig bedre brukervennlighet av å gjenta informasjon om igjen på hvert skjermbilde. Noen mener at gjentakelser reduserer kognitiv last, og at de har vist dette i brukertester. Jeg er åpen for at de har rett, og selv om jeg ikke elsker gjentakelser av informasjon skal jeg så absolutt overleve slike skjemaer. Likevel får jeg lyst til å problematisere litt:

Hvis du overser «alle felt er obligatoriske» på den første siden, vil du ikke da overse den samme informasjonen på etterfølgende sider?
Hvis du har kognitive utfordringer som gjør at du ikke husker en beskjed gitt i starten av et skjema, er det da sannsynlig at du får vesentlig hjelp med å fylle ut skjemaet ved å gjenta «alle felt er obligatoriske» på hver side?

Har du ett eller veldig få frivillige felt kan du skrive at alle felt er obligatoriske dersom feltet ikke er merket som frivillig. I så fall må du altså merke frivillige felt, for eksempel i ledeteksten til feltet:


<label for="kommentar">Har du andre kommentarer (frivillig):</label>
<textarea id="kommentar" name="kommentar" rows="10" cols="50" maxlength="1000"></textarea>

For å gjøre dette tydeligere kan du merke «frivillig» med en tag (se nedenfor).

Tilsynet for universell utforming av ikt[3] har relativt lite informasjon om obligatoriske felt (bortsett fra at de skal identifiseres), altså i tråd med kravene i WCAG. Dette står om tillatt merking:

Brukeren skal på forhånd få informasjon om hvilke skjemafelter som må fylles ut i et skjema. Når brukeren får informasjon om obligatoriske felt på forhånd, er det lettere å fylle ut skjemaet riktig på første forsøk. En måte å informere på, er for eksempel å skrive hvilke felter som må fylles ut over første skjemafelt.
Det er også mulig å bruke et symbol for å merke obligatoriske felter. For at bruk av symbol skal være godkjent merking, må meningen med symbolet forklares før det tas i bruk første gang i skjemaet. Det kan for eksempel være en tekst som sier «Obligatoriske felter er merket med * » eller lignende, over første skjemafelt.

Ett felt

Har du kun ett felt trenger du ikke å merke det som obligatorisk. Det gir rett og slett ikke mening og ikke fylle inn noe i slike felt. Ofte er denne typen felt frivillige i den forstand at du ikke trenger å bruke skjemaet: Søk, Epost for å melde deg på et nyhetsbrev eller liknende. Bruker du feltet er det ganske opplagt at noe skal fylles inn der.

Brukernavn/Passord er også unntatt fra behovet om å måtte merke felt som obligatoriske. Vi skjønner at begge deler må inn.

Skjemaer med mange frivillige og mange obligatoriske felt

Hvis det gir mening å ha en blanding av frivillige og obligatoriske felt tenker jeg at det ryddigste er å merke alle felt på en tydelig måte. Da slipper du å lure, men «hva er kognitivt greit for alle, dvs. hva er tydelig nok?». Jeg synes det er en del synsing mht. hva som er best for brukerne. Det jeg tror er den beste løsningen er å lage mønstre, dvs. måter å merke på som brukerne etter hvert vil bli kjent med: gjerne felles mønster for offentlig sektor.

Teknikker for å merke felt som frivillige eller obligatoriske

Det finnes flere måter å angi om felt må fylles ut eller ikke. Nedenfor beskriver jeg noen av teknikkene og litt om universell utforming.

HTML required

Det er flere grunner til at HTML required bør brukes med varsomhet. På Aksel[1] står det:

HTMLs required-attributt inkluderer både funksjonalitet og design i tillegg til semantikk som standard. Håndteringen av disse egenskapene er ikke konsistent på tvers av nettlesere. required-attributtet disabler innsendingen av skjemaet og viser nettleserens innebygde feilmelding tilknyttet skjemafeltet. Det betyr at validering du selv har programmert til å bli utført på submit ikke blir utført. Du har heller ikke kontroll over feilmeldingens innhold eller utseende. Feilmeldingen kan for eksempel dukke opp i et annet språk enn nettsiden, og responderer ikke nødvendigvis på brukerens innstilling for skriftstørrelse.
Dersom du må bruke HTMLs required -attributt, kan du legge novalidate -attributtet på form-elementet for å unngå at nettleseren bruker sin egen validering og blokkerer submit.

Personlig synes jeg HTML required leses opp på en litt forvirrende måte med noen skjermlesere. VoiceOver leser for eksempel «kreves ugyldige data» på slike felt når du kommer dit (før du begynner å skrive noe). Dette er imidlertid egentlig ikke et argument for å droppe required: Apple kan endre hva VoiceOver sier når som helst. Hvis du er interessert i å teste eller lese om hvordan ulike skjermlesere håndterer aria-required og HTML required kan du sjekke Required-demo[9] på dette nettstedet.

Et alternativ til required attributtet er aria-required. Hovedregelen er at aria skal brukes dersom språket (html) du benytter ikke har tilsvarende funksjonalitet. Det burde bety at aria-required ikke skal brukes etter min mening, men så er det et men. Aria-required medfører ikke validering og gir heller ingen visuelle endringer. Argumentet med at required håndteres ulikt er jeg bare delvis enig i: validering kan lett fjernes, og det er mange ting som håndteres litt ulikt i ulike nettlesere. Dessuten tipper jeg det kan stiles ganske likt?

Stjerna (*)

Når jeg snakker om bruk av stjerne tenker jeg den som en del av ledeteksten, altså ikke plassert utenfor ledeteksten. Plasseres * utenfor blir den usynlig for skjermleserbrukere som trykker Tab fra felt til felt.

For meg har stjerna (*) nærmest blitt obligatorisk for å angi at et felt må fylles ut. Det er nok imidlertid ikke like godt planta i ryggmargen på alle. Faktisk har jeg sett et eksempel på et skjema der * ble brukt for å angi frivillige felt: tro det eller ei, men det var på nettsidene til en norsk bank. Banken har rettet opp skjemaet nå, men hva er grunnen til ikke bare å velge stjerna?

Brukertesting skal i følge flere jeg har diskutert med vist at mange ikke skjønner hva stjerna betyr, og at det heller ikke er nok å skrive dette innledningsvis i skjemaer. Obligatoriske felt er merket med * (rød stjerne), skriver Oslo kommune på EDialog[7]. Veldig mange andre gjør det på samme måte. For meg er det litt fristende å si at dette er helt supert, og at hvis alle kunne gjøre det sånn ville folk ha lært det etter hvert. Samtidig er dette kanskje et stjerneeksempel på at det er viktig å tenke nytt, og at vi alltid skal jobbe for å få bedre brukgergrensesnitt! Helt generelt er det bedre og mer forståelig med klartekst enn med symboler, også for meg!

Googler du på nettet vil du sannsynligvis finne informasjon om at * ikke er så bra fordi den ikke leses opp av alle skjermlesere. Dette er faktisk riktig, men kan endre seg når som helst. Når dette skrives leses ikke stjerna opp hverken av Windows skjermleser eller VoiceOver. Da er det kanskje lurt med aria-required likevel (hvis required ikke brukes, altså)? Kanskje det, men da vil på den annen side mange skjermleserbrukere få dobbelt opp med informasjon. Brukes stjerne er derfor det å legge til aria-required og fjerne stjerna fra skjermlesere en aktuell teknikk:


<label for="kommentar">Mobil <span aria-hidden=’true’>(*)</span>:</label>
<input type=’text’ …>

Klartekst i ledeteksten

Noen, for eksempel Brønnøysund-registrene, skriver i klartekst i hver ledetekst om et felt er obligatorisk eller ikke. Dette er tydelig, men kan muligens bli littt omstendelig og kanskje også bety mindre lesbarhet eksempelvis for dyslektikere? Så vidt jeg vet er ikke dette vist i brukerundersøkelser, og muligens tar jeg feil. Er alle felt obligatoriske foretrekker i alle fall jeg at det står innledningsvis og at jeg slipper å få lest opp dette i hvert bidige felt (med syntetisk tale gjør dette enkelte ganger skjemaet ganske mye mer krunglete å fylle ut og forstå). Hvis aria-required i tillegg brukes på obligatoriske felt skravler skjermleseren hull i hodet på deg, hehe. Se litt mer om aria-required nedenfor.

Er det ett eller noen veldig få frivillige felt mener jeg at det mest hensiktsmessige er å vise det på en tydelig måte for de feltene det gjelder. Er det en salig blanding av frivillige og obligatoriske felt er det kanskje like greit å skrive det i klartekst (i ledeteksten, altså, ikke for eksempel under feltet).

Tagg i ledeteksten

For å gjøre frivillig, obligatorisk eller begge alternativer mer tydelig kan du bruke en tagg i ledeteksten. Med tagg menes det her en visuell markering som skiller seg fra selve ledeteksten, eksempelvis gul bakgrunn på frivillige felt:


        <label for="tagField">Si litt om deg selv <span class="oblig">(frivillig):</span></label><br>
        <textarea id="tagField" name="kommentar" rows="10" cols="50" maxlength="1000"></textarea>

Si litt om deg selv (frivillig):

Bruk av farger

Farger kan brukes, for eksempel ved å benytte ulike farger i tagger med tekst. Kun bruk av farger er derimot et brudd på WCAG (suksesskriterie 1.4.1)[8]:

Farge blir ikke benyttet som det eneste visuelle virkemidlet for å formidle informasjon, angi en handling, be om respons eller skille ut et visuelt element.

Skal du bruke farger må du altså sørge for å gi informasjon om frivillig/obligatorisk også på en alternativ måte.

aria-required

Aria-required er et attributt som kan benyttes for å angi obligatoriske felt. Jeg har alt skrevet at dette attributtet kan være aktuelt hvis * brukes for å markere obligatoriske felt. Noen mener at aria-required alltid skal benyttes, uavhengig av både «klartekst i ledeteksten» og innledende forklaring om at alle felt er obligatoriske. Så vidt jeg vet er aria-required et attributt som kun utnyttes av skjermlesere. Står «må fylles ut» eller «obligatorisk» i en ledetekst foreslår noen å fjerne dette for skjermleser:


        <label for="kommentar">Har du andre kommentarer <span aria-hidden=’true’>(frivillig)</span>:</label>
        <textarea id="kommentar" name="kommentar" rows="10" cols="50" maxlength="1000"></textarea>

Altså den samme kodingen som jeg skisserte for stjerna. Jeg synes dette er klønete og unødvendig koding. Står det i klartekst holder dette fint også for skjermlesere.

Aria-required trengs egentlig bare hvis merkingen av felt er feil! Med andre ord: er du fristet til å bruke aria-required har du sannsynligvis gjort noe feil! Men, ingen regel uten unntak, og her er unntaket stjerne-eksemplet.

Oppsummert

Unngå aria-required hvis ledeteksten inneholder informasjon om obligatorisk, begrens deg til de feltene du har bruk for og inntil vi har en felles standard bør du merke frivillige og obligatoriske felt så godt du kan. Skjemaer og målgrupper er veldig forskjellige, og derfor er brukertesting gull!