Ingen overraskelser ved endring i skjemafelt (WCAG 3.2.2)

Du er i en nettbutikk og blar gjennom en nedtrekksliste for å velge størrelse på en t-skjorte. Plutselig, midt i blafringen, hopper siden til en ny URL fordi du traff «XL» - som tilfeldigvis hadde en navigasjonslenke knyttet til seg. Eller du krysser av i en avkrysningsrute, og plutselig forsvinner halvparten av skjemaet. Denne typen uforutsigbar oppførsel er det WCAG 3.2.2 skal forhindre.

Hva sier kravet?

WCAG 3.2.2 Ved inndata krever at endring av verdien i et skjemaelement (å skrive tekst, velge i en nedtrekksliste, krysse av i en boks) ikke automatisk skal utløse en kontekstendring - med mindre brukeren er informert om det på forhånd.

En kontekstendring betyr en betydelig endring som kan forvirre brukeren, for eksempel:

Navigasjon til en annen side
Innsending av et skjema
Åpning av et nytt vindu
Stor omstrukturering av sidens innhold
At fokus flyttes til et annet sted

Kravet er på nivå A og henger tett sammen med WCAG 3.2.1 (Ved fokus). Mens 3.2.1 handler om hva som skjer når et element mottar fokus, handler 3.2.2 om hva som skjer når brukeren endrer verdien i et skjemaelement.

Det er viktig å forstå forskjellen mellom en kontekstendring og en innholdsendring. Å vise eller skjule felt i et skjema basert på et valg er ofte greit, så lenge det skjer på en forutsigbar måte og ikke flytter fokus uventet. Å navigere til en ny side uten at brukeren har trykket på en knapp, derimot, er en klar kontekstendring.

Hvorfor er dette viktig?

Tastaturbrukere navigerer annerledes i nedtrekkslister

Dette er kjerneproblemet. Når en musebruker klikker på et valg i en nedtrekksliste, gjør de et bevisst valg. Men en tastaturbruker bruker piltastene for å bla gjennom valgene - og hvert tastetrykk endrer verdien i feltet. Hvis hvert verdibytte utløser navigasjon eller innsending, kan tastaturbrukeren aldri nå det valget de faktisk vil ha uten å utløse handlinger på veien.

Tenk deg en nedtrekksliste med fylker, der du vil velge «Troms og Finnmark». Hvis listen navigerer ved hvert verdibytte, har du allerede blitt sendt til Agder, Innlandet, Møre og Romsdal, Nordland, Oslo, Rogaland, Telemark og Trøndelag før du når Troms.

Skjermleserbrukere trenger forutsigbarhet

En skjermleserbruker kan ikke se hva som endrer seg på resten av siden. Hvis valg i et skjemafelt utløser endringer som skjer utenfor brukerens fokusområde, vil de sannsynligvis ikke oppdage det. De kan ende opp med å fylle ut et skjema som ser helt annerledes ut enn det de tror.

Kognitive utfordringer

Brukere med kognitive funksjonsnedsettelser er avhengige av forutsigbarhet. Uventede endringer på siden kan gjøre at de mister oversikten og ikke forstår hva som skjedde eller hvordan de skal komme seg videre.

Slik oppfyller du kravet

Nedtrekkslister som navigerer: legg til en knapp

Det klassiske eksempelet på et brudd er en <select> som navigerer til en ny side ved onchange:

<!-- Feil: Navigerer automatisk ved valg -->
<label for="avdeling">Velg avdeling:</label>
<select id="avdeling" 
  onchange="window.location = this.value;">
  <option value="/oslo">Oslo</option>
  <option value="/bergen">Bergen</option>
  <option value="/trondheim">Trondheim</option>
</select>

<!-- Riktig: Bruker en Gå-knapp -->
<label for="avdeling">Velg avdeling:</label>
<select id="avdeling">
  <option value="/oslo">Oslo</option>
  <option value="/bergen">Bergen</option>
  <option value="/trondheim">Trondheim</option>
</select>
<button type="button" 
  onclick="window.location = 
    document.getElementById('avdeling').value;">
  Gå til avdeling
</button>

Ikke send skjemaer automatisk ved input

Skjemaer som sender seg selv når brukeren fyller inn det siste feltet, eller når en avkrysningsrute endres, bryter kravet:

// Feil: Sender skjema ved avkrysning
checkbox.addEventListener('change', function() {
  this.form.submit();
});

// Riktig: La brukeren klikke en send-knapp
// (Bruk en vanlig submit-knapp i skjemaet)

<form action="/oppdater-innstillinger" method="post">
  <fieldset>
    <legend>Varslingsinnstillinger</legend>
    <label>
      <input type="checkbox" name="epost" value="ja">
      Motta varslinger på e-post
    </label>
    <label>
      <input type="checkbox" name="sms" value="ja">
      Motta varslinger på SMS
    </label>
  </fieldset>
  <button type="submit">Lagre innstillinger</button>
</form>

Dynamisk filtrering er OK - med forbehold

Det er viktig å forstå at ikke all interaksjon ved input er forbudt. Dynamisk filtrering - for eksempel at en produktliste oppdateres når du velger en kategori - er vanligvis greit, fordi det ikke er en kontekstendring. Innholdet oppdateres på samme side uten at fokus flyttes.

<!-- OK: Filtrerer innhold på samme side -->
<label for="kategori">Filtrer produkter:</label>
<select id="kategori" 
  onchange="filterProducts(this.value);">
  <option value="alle">Alle produkter</option>
  <option value="sko">Sko</option>
  <option value="klær">Klær</option>
</select>

<div id="produktliste" aria-live="polite">
  <!-- Produktene oppdateres her -->
</div>

Legg merke til aria-live="polite" på beholderelementet. Det sørger for at skjermlesere annonserer at innholdet er oppdatert, uten å flytte fokus.

Informer brukeren på forhånd

Hvis det er helt nødvendig at en endring utløser noe automatisk, kan du oppfylle kravet ved å informere brukeren på forhånd:

<label for="land">
  Velg land (siden oppdateres automatisk):
</label>
<select id="land" onchange="updatePage(this.value);">
  <option value="no">Norge</option>
  <option value="se">Sverige</option>
</select>

Men selv med en slik advarsel er det bedre praksis å bruke en eksplisitt knapp.

Vanlige feil

Nedtrekkslister som navigerer med onchange - den desidert vanligste feilen, spesielt i språkvelgere og nettstedsnavigasjon.
Avkrysningsruter som sender skjemaet - for eksempel innstillingssider der hver avkrysning lagres umiddelbart uten at brukeren har bedt om det.
Radioknapper som endrer sidens innhold drastisk - for eksempel et bestillingsskjema der valg av leveringsmetode fjerner eller legger til store deler av skjemaet uten advarsel.
Søkefelt som navigerer til resultatside mens du skriver - autocomplete som oppdaterer forslag er greit, men å automatisk navigere bort fra siden er det ikke.
Filopplasting som starter prosessering umiddelbart - brukeren velger en fil, og plutselig lastes den opp og siden endres, uten at brukeren har trykket «Last opp».

Hold deg til hovedregelen: la brukeren ta det siste steget. Gi dem alltid en knapp å trykke på.