Hopp til hovedinnhold
UUKontroll logo UUKontroll

La brukeren kontrollere viktige innsendinger (WCAG 3.3.4)

For handlinger med juridiske eller økonomiske konsekvenser må brukeren kunne angre, kontrollere eller bekrefte.

wcag niva-aa skjema

Alle gjør feil. Du trykker «Betal» i stedet for «Tilbake». Du glemmer å endre antallet fra 10 til 1. Du sender en søknad med feil adresse. I den fysiske verden kan du ofte rette opp slike feil - du går tilbake til butikken, du ringer og korrigerer. Men på nettet er handlinger ofte umiddelbare og vanskelige å reversere. WCAG 3.3.4 krever at nettsider gir brukerne et sikkerhetsnett for de viktigste handlingene.

Hva sier kravet?

WCAG 3.3.4 Forhindring av feil (juridiske, økonomiske, data) krever at for nettsider der brukeren sender inn data som medfører juridiske forpliktelser, økonomiske transaksjoner, eller endring/sletting av brukerens egne data, skal minst ett av følgende være oppfylt:

  1. Reversibel: Innsendingen kan angres.
  2. Kontrollert: Dataene kontrolleres for feil, og brukeren får mulighet til å rette dem.
  3. Bekreftet: Brukeren kan gjennomgå, bekrefte og korrigere informasjonen før den sendes inn endelig.

Kravet er på nivå AA og gjelder spesifikt for situasjoner der konsekvensene av en feil er betydelige. Det handler ikke om ethvert skjema - det handler om skjemaer der feil kan koste penger, binde brukeren juridisk, eller føre til tap av viktige data.

Hvorfor er dette viktig?

Feil kan ha store konsekvenser

En feil i et kontaktskjema er irriterende, men sjelden alvorlig. En feil i et betalingsskjema kan koste tusenvis av kroner. En feil i en offentlig søknad kan føre til at du mister rettigheter eller frister. En feil i kontosletting kan bety tap av årevis med data. For disse situasjonene trenger brukeren beskyttelse.

Brukere med funksjonsnedsettelser gjør oftere feil

Det er ikke fordi de er mindre kompetente - det er fordi grensesnittene ofte er vanskeligere å bruke med hjelpeteknologi. En skjermleserbruker kan ha vanskeligheter med å oppdage at en adresse har et skrivefeil i forhåndsvisningen. En bruker med motoriske utfordringer kan trykke feil knapp. En bruker med kognitive utfordringer kan misforstå et skjemafelt. Et godt sikkerhetsnett fanger opp disse feilene.

Det handler om tillit

Brukere som vet at de kan gjennomgå og korrigere informasjonen før innsending, føler seg tryggere. De er mer villige til å fullføre transaksjoner og sender inn mer nøyaktig informasjon. Det er bra for alle parter.

Lovkrav for mange virksomheter

I tillegg til WCAG-kravet har mange norske virksomheter plikt etter angrerettloven og forbrukerkjøpsloven til å gi kundene mulighet til å gjennomgå bestillingen før den er endelig. WCAG 3.3.4 samsvarer godt med disse eksisterende rettslige forpliktelsene.

Slik oppfyller du kravet

Bekreftelsesside før endelig innsending

Den vanligste og mest robuste løsningen for nettbutikker og søknadsskjemaer er en oppsummeringsside der brukeren kan gjennomgå alt før de bekrefter:

<!-- Steg 1-3: Brukeren fyller inn informasjon -->
<!-- Steg 4: Oppsummeringsside -->
<div class="bestilling-oppsummering">
  <h2>Gjennomgå bestillingen din</h2>
  
  <section>
    <h3>Leveringsadresse</h3>
    <p>Ola Nordmann<br>
       Storgata 1<br>
       0150 Oslo</p>
    <a href="/bestilling/steg2">Endre adresse</a>
  </section>
  
  <section>
    <h3>Produkter</h3>
    <table>
      <thead>
        <tr>
          <th>Produkt</th>
          <th>Antall</th>
          <th>Pris</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Trådløse hodetelefoner</td>
          <td>1</td>
          <td>899 kr</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Totalt inkl. frakt</td>
          <td>948 kr</td>
        </tr>
      </tfoot>
    </table>
    <a href="/bestilling/steg1">Endre produkter</a>
  </section>
  
  <section>
    <h3>Betalingsmåte</h3>
    <p>Visa ****1234</p>
    <a href="/bestilling/steg3">Endre betaling</a>
  </section>
  
  <form action="/bestilling/bekreft" method="post">
    <button type="submit" class="btn-primary">
      Bekreft og betal 948 kr
    </button>
  </form>
</div>

Legg merke til at hver seksjon har en «Endre»-lenke som tar brukeren tilbake til det relevante steget uten å miste resten av informasjonen.

Bekreftelsesdialog for destruktive handlinger

For handlinger som sletter data eller avslutter tjenester, bruk en bekreftelsesdialog som krever en eksplisitt handling:

<button type="button" id="slett-konto-knapp">
  Slett min konto
</button>

<dialog id="slett-dialog">
  <h2>Er du sikker?</h2>
  <p>Denne handlingen sletter kontoen din og 
     alle tilknyttede data permanent. 
     Dette kan ikke angres.</p>
  <p>Skriv «SLETT» for å bekrefte:</p>
  <input type="text" id="bekreft-input" 
    aria-label="Skriv SLETT for å bekrefte">
  <div class="dialog-handlinger">
    <button type="button" class="btn-fare" 
      id="bekreft-slett" disabled>
      Slett kontoen min permanent
    </button>
    <button type="button" class="btn-sekundar" 
      id="avbryt-slett">
      Avbryt
    </button>
  </div>
</dialog>

Angremulighet etter handling

For noen handlinger er det mer brukervennlig å la handlingen skje, men tilby en angremulighet i en begrenset periode:

<!-- Etter at brukeren har avbestilt en time -->
<div role="alert" class="varsel-info">
  <p>Timen din 15. mars kl. 10:00 er avbestilt.</p>
  <button type="button" 
    onclick="angreAvbestilling('time-123')">
    Angre avbestilling (tilgjengelig i 30 sekunder)
  </button>
</div>

Husk at angremuligheten må være tilgjengelig lenge nok til at brukeren rekker å oppdage og bruke den. 30 sekunder er et minimum - og for skjermleserbrukere kan selv det være i korteste laget.

Validering før innsending

For skjemaer med juridiske konsekvenser, kjør grundig validering og vis alle feil før brukeren kan sende inn:

function validerSoknad(skjema) {
  const feil = [];
  
  if (!skjema.fodselsnummer.value.match(/^\d{11}$/)) {
    feil.push({
      felt: 'fodselsnummer',
      melding: 'Fødselsnummer må ha 11 siffer.'
    });
  }
  
  if (!skjema.signatur.checked) {
    feil.push({
      felt: 'signatur',
      melding: 'Du må bekrefte at opplysningene ' +
        'er korrekte før du sender søknaden.'
    });
  }
  
  if (feil.length > 0) {
    visFeiloppsummering(feil);
    return false;
  }
  
  return true;
}

E-postbekreftelse for viktige endringer

For kontoadministrasjon og andre viktige endringer kan det være lurt å sende en bekreftelse per e-post med mulighet for å angre:

<div class="varsel-suksess" role="status">
  <p>Vi har sendt en bekreftelse til 
    ola@eksempel.no. Klikk lenken i e-posten 
    for å fullføre adresseendringen. 
    Du kan avbryte innen 24 timer.</p>
</div>

Vanlige feil

  • Ingen oppsummeringsside i bestillingsprosessen - brukeren går rett fra utfylling til betaling uten mulighet til å gjennomgå informasjonen.
  • «Er du sikker?»-dialog uten konsekvensforklaring - en bekreftelsesdialog som bare sier «Vil du fortsette?» uten å forklare hva konsekvensen er.
  • Sletting uten bekreftelse - brukerdata, kontoer eller bestillinger som slettes med ett klikk, uten bekreftelsesdialog eller angremulighet.
  • Angremuligheten er for kort - en «Angre»-knapp som bare er tilgjengelig i noen få sekunder, for raskt for mange brukere.
  • Endringer som ikke kan korrigeres - brukeren har sendt inn en søknad og oppdager en feil, men har ingen mulighet til å kontakte systemet for å rette opp.
  • Manglende «Endre»-lenker i oppsummeringen - oppsummeringssiden viser informasjonen, men det er ingen måte å gå tilbake og endre enkeltfelt uten å starte helt på nytt.

Forhindring av feil handler om å behandle brukerne med respekt. Det tar ikke lang tid å legge inn en bekreftelsesside eller en angremulighet, men det kan spare brukerne for stor frustrasjon - og i verste fall økonomisk tap.