Hopp til hovedinnhold
UUKontroll logo UUKontroll

Gi brukeren nok tid (WCAG 2.2.1)

Tidsbegrensninger på nettsiden må kunne justeres, forlenges eller slås av av brukeren.

wcag niva-a navigasjon

Du fyller ut et langt skjema for å søke om noe viktig. Halvveis gjennom dukker det opp en melding: «Din økt har utløpt. Vennligst logg inn på nytt.» Alt du har skrevet er borte. For mange brukere er dette ikke bare frustrerende - det er et reelt hinder som gjør tjenesten utilgjengelig.

Hva sier kravet?

WCAG 2.2.1 «Justerbar tid» er et nivå A-krav som handler om alle tidsbegrensninger som nettsiden setter for brukeren. Kravet sier at når innholdet har en tidsbegrensning, skal brukeren få minst én av disse mulighetene:

  • Slå av: Brukeren kan slå av tidsbegrensningen helt før den starter
  • Justere: Brukeren kan justere tidsbegrensningen til minst ti ganger standardlengden
  • Forlenge: Brukeren blir varslet minst 20 sekunder før tiden utløper og får mulighet til å forlenge med en enkel handling (for eksempel trykke en knapp), og dette kan gjøres minst ti ganger

Det finnes noen unntak. Tidsbegrensninger i sanntidshendelser (som en auksjon eller en eksamen med fastsatt tid) er unntatt dersom tidsbegrensningen er en nødvendig del av aktiviteten. Tidsbegrensninger som varer mer enn 20 timer er også unntatt. Det samme gjelder begrensninger som er nødvendige av sikkerhetsgrunner - men selv da bør brukeren informeres.

Hvorfor er dette viktig?

Tidsbegrensninger rammer brukere ulikt. Noen trenger rett og slett mer tid enn andre:

  • Skjermleserbrukere navigerer sekvensielt gjennom innholdet og bruker ofte vesentlig mer tid på å fylle ut skjemaer og lese sider
  • Brukere med kognitive funksjonsnedsettelser kan trenge mer tid til å forstå instruksjoner og ta beslutninger
  • Brukere med motoriske vanskeligheter skriver langsommere og bruker mer tid på å navigere mellom felter
  • Eldre brukere som kanskje ikke er vant til digitale løsninger og bruker lengre tid på å orientere seg

Men det handler ikke bare om funksjonsnedsettelser. Tenk på alle som har blitt avbrutt midt i en handling - telefonen ringer, barnet trenger oppmerksomhet, du må finne BankID-brikken. En rigid tidsbegrensning straffer alle som ikke fullfører i ett strekk.

For offentlige tjenester er dette spesielt viktig. Når en person fyller ut et søknadsskjema hos NAV, Lånekassen eller kommunen, må de kunne ta den tiden de trenger. Taper de alt arbeidet fordi økten utløper, kan det bety at de gir opp hele prosessen.

Slik oppfyller du kravet

Gi forhåndsvarsel før tidsavbrudd

Den vanligste tidsbegrensningen på norske nettsider er øktutløp (session timeout). De fleste nettsteder logger ut brukeren etter en periode med inaktivitet - typisk 15 eller 30 minutter. Løsningen er å vise et varsel før tiden utløper:

<div id="tidsvarsel" role="alertdialog" aria-labelledby="varsel-tittel" hidden>
  <h2 id="varsel-tittel">Økten din utløper snart</h2>
  <p>Du blir logget ut om <span id="nedtelling">60</span> sekunder.</p>
  <button onclick="forlengOekt()">Fortsett økten</button>
  <button onclick="loggUt()">Logg ut nå</button>
</div>

let oektTimer;
let varselTimer;
const OEKT_VARIGHET = 30 * 60 * 1000; // 30 minutter
const VARSEL_FOER = 2 * 60 * 1000;    // Varsle 2 minutter før

function startOektTimer() {
  clearTimeout(oektTimer);
  clearTimeout(varselTimer);

  varselTimer = setTimeout(() => {
    document.getElementById('tidsvarsel').hidden = false;
    startNedtelling(120); // 120 sekunder
  }, OEKT_VARIGHET - VARSEL_FOER);

  oektTimer = setTimeout(() => {
    loggUt();
  }, OEKT_VARIGHET);
}

function forlengOekt() {
  document.getElementById('tidsvarsel').hidden = true;
  startOektTimer(); // Start timeren på nytt
  // Send en forespørsel til serveren for å fornye økten
  fetch('/api/forny-oekt', { method: 'POST' });
}

Lagre brukerens fremgang

I tillegg til å gi mulighet for å forlenge tiden, bør du lagre brukerens data underveis. Hvis økten likevel utløper, bør de ikke miste alt arbeidet:

// Lagre skjemadata automatisk underveis
const skjema = document.getElementById('soeknadsskjema');
skjema.addEventListener('input', () => {
  const data = new FormData(skjema);
  const obj = Object.fromEntries(data.entries());
  localStorage.setItem('skjema_utkast', JSON.stringify(obj));
});

// Gjenopprett data etter innlogging
window.addEventListener('load', () => {
  const lagretUtkast = localStorage.getItem('skjema_utkast');
  if (lagretUtkast) {
    const data = JSON.parse(lagretUtkast);
    Object.entries(data).forEach(([navn, verdi]) => {
      const felt = skjema.querySelector(`[name="${navn}"]`);
      if (felt) felt.value = verdi;
    });
  }
});

Innhold som oppdateres automatisk

Tidsbegrensninger handler ikke bare om øktutløp. Det inkluderer også innhold som oppdateres eller forsvinner automatisk - for eksempel:

  • Nyhetsstrømmer som ruller automatisk
  • Bannere eller varsler som forsvinner etter noen sekunder
  • Karuseller som bytter bilde automatisk
  • Varsler (toasts) som lukkes etter en kort stund

For alle disse tilfellene bør brukeren enten kunne stoppe, pause eller kontrollere tidsstyringen:

// Varsel som forsvinner etter 10 sekunder - men stopper ved fokus/hover
const varsel = document.getElementById('varsel');
let lukkTimer;

function startLukkTimer() {
  lukkTimer = setTimeout(() => {
    varsel.hidden = true;
  }, 10000);
}

varsel.addEventListener('mouseenter', () => clearTimeout(lukkTimer));
varsel.addEventListener('focusin', () => clearTimeout(lukkTimer));
varsel.addEventListener('mouseleave', startLukkTimer);
varsel.addEventListener('focusout', startLukkTimer);

Gi mulighet til å slå av tidsbegrensninger

For ikke-sikkerhetskritisk funksjonalitet bør du vurdere om tidsbegrensningen er nødvendig i det hele tatt. Spør deg selv: «Hva er det verste som skjer hvis brukeren får ubegrenset tid?» Ofte er svaret «ingenting», og da bør tidsbegrensningen fjernes eller gjøres valgfri.

Vanlige feil

  • Øktutløp uten forvarsel - brukeren mister alt arbeid uten mulighet til å reagere
  • Varsler og toasts som forsvinner for raskt - spesielt problematisk for skjermleserbrukere som kanskje ikke rekker å lese dem
  • Automatisk viderekobling etter nedtelling - for eksempel «Du blir sendt videre om 5 sekunder» uten mulighet for å forlenge
  • Tidsbegrensede tilbud i nettbutikker der varer i handlekurven forsvinner uten varsel
  • Skjemaer som mister data ved øktutløp uten at brukerens input er lagret
  • For kort tid mellom varsel og utløp - 5 sekunder er ikke nok for mange brukere, kravet sier minst 20 sekunder

Gode tidsbegrensninger handler om respekt for brukerens tid og situasjon. Gi dem kontroll, gi dem varsel, og behold arbeidet deres uansett hva som skjer.