Enkle hurtigtaster må kunne slås av (WCAG 2.1.4)

Tenk deg at du bruker talestyring for å navigere på nettet. Du sier et ord, og plutselig aktiveres en snarvei på nettsiden du ikke hadde tenkt å bruke. Eller du taster inn tekst i et søkefelt, og bokstavene du skriver utløser funksjoner i stedet for å bli registrert som tekst. Dette er hverdagen for mange brukere når nettsider implementerer hurtigtaster med enkelttegn uten de nødvendige sikkerhetstiltakene.

Hva sier kravet?

WCAG 2.1.4 «Hurtigtaster med tegn» er et nivå A-krav som gjelder når en nettside bruker hurtigtaster som aktiveres av et enkelt bokstavtegn, tall eller symbol. Kravet sier at slike hurtigtaster må oppfylle minst ett av disse vilkårene:

• Kan slås av: Brukeren kan deaktivere hurtigtasten
• Kan endres: Brukeren kan endre hurtigtasten til å bruke en kombinasjon med en modifikasjonstast (Ctrl, Alt, Shift)
• Bare aktiv ved fokus: Hurtigtasten er bare aktiv når det relevante elementet har fokus

Merk at dette kravet ikke gjelder hurtigtaster som allerede bruker modifikasjonstaster (som Ctrl+S for å lagre). Det handler spesifikt om snarveier som utløses av én enkelt tast - for eksempel at «s» åpner søk, eller at «?» viser hjelpetekst.

Hvorfor er dette viktig?

Talestyring og utilsiktet aktivering

Brukere som styrer datamaskinen med tale - for eksempel med Dragon NaturallySpeaking eller innebygd stemmegjenkjenning - opplever at taleinput tolkes som tastetrykk. Hvis nettsiden har hurtigtaster på enkle bokstaver, kan tilfeldige ord i talekommandoer utløse uønskede handlinger. Forestill deg at du dikterer en e-post, og bokstaven «d» utløser en «slett»-funksjon i bakgrunnen.

Motoriske vanskeligheter

Brukere med skjelvinger eller begrenset motorikk kan trykke feil tast ved et uhell. Når en enkelt bokstavtast utløser en handling, er terskelen for feiltrykk veldig lav. En modifikasjonstast som Ctrl eller Shift krever et bevisst, sammensatt tastetrykk som er vanskeligere å utløse ved et uhell.

Skjermtastatur og mobilbruk

Brukere som bruker skjermtastatur kan også oppleve problemer. Navigering på skjermtastaturet kan utilsiktet generere tastetrykk som aktiverer snarveier, spesielt hvis fokus ligger på feil sted.

Slik oppfyller du kravet

Bruk modifikasjonstaster

Den enkleste løsningen er å kreve en modifikasjonstast i alle hurtigtaster. I stedet for at «s» åpner søk, la det være «Ctrl+K» eller «Alt+S»:

// FEIL: Enkelttegn-snarvei uten modifikasjonstast
document.addEventListener('keydown', (e) => {
  if (e.key === 's') {
    aapneSoek();
  }
});

// RIKTIG: Krever modifikasjonstast
document.addEventListener('keydown', (e) => {
  if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
    e.preventDefault();
    aapneSoek();
  }
});

Sjekk om et tekstfelt har fokus

Hvis du absolutt trenger enkelttegn-snarveier, sørg for at de bare er aktive når fokus ikke er i et tekstfelt. Dette er et minimum, men det oppfyller ikke kravet alene - brukeren må også kunne slå av eller endre snarveien:

document.addEventListener('keydown', (e) => {
  const aktivtElement = document.activeElement;
  const erITekstfelt = aktivtElement.tagName === 'INPUT' ||
                        aktivtElement.tagName === 'TEXTAREA' ||
                        aktivtElement.isContentEditable;

  if (erITekstfelt) return;

  if (e.key === '?' && snarveierAktivert) {
    visHjelp();
  }
});

Gi brukeren kontroll

Den mest robuste løsningen er å la brukeren selv bestemme. Tilby en innstilling der hurtigtaster kan slås av eller tilpasses:

// Hent brukerens preferanser (fra localStorage eller brukerinnstillinger)
const snarveierAktivert = localStorage.getItem('snarveier') !== 'av';

document.addEventListener('keydown', (e) => {
  if (!snarveierAktivert) return;

  // Sjekk om en modifikasjonstast er brukt - i så fall, la det passere uansett
  if (e.ctrlKey || e.altKey || e.metaKey) return;

  // Enkelttegn-snarveier bare når innstillingen er på
  if (e.key === '/' && !erITekstfelt(document.activeElement)) {
    e.preventDefault();
    aapneSoek();
  }
});

Bare aktive ved fokus

Dersom snarveien kun gjelder en spesifikk komponent, bind den til den komponenten i stedet for hele dokumentet. Da er den bare aktiv når komponenten har fokus, noe som oppfyller kravet:

const videospiller = document.getElementById('video');

// Snarveier bare aktive når videospilleren har fokus
videospiller.addEventListener('keydown', (e) => {
  if (e.key === 'm') {
    vekslDemping();
  }
  if (e.key === 'f') {
    fullskjerm();
  }
});

Vanlige feil

• Globale enkelttegn-snarveier uten mulighet for å slå dem av. Mange nettapplikasjoner (prosjektstyringsverktøy, e-postklienter) implementerer snarveier som «j» og «k» for navigering uten å tilby en avslå-funksjon.
• Søkefelt som aktiveres med en bokstavtast. Å trykke «s» eller «/» for å åpne søk er populært, men problematisk uten de rette tiltakene.
• Videospillere med enkelttegn-snarveier som «m» for muting eller «f» for fullskjerm, som er aktive selv når spilleren ikke har fokus.
• Kartkomponenter der bokstavtaster endrer kartvisning (for eksempel «+» og «-» for zoom) utenfor selve kartkomponenten.
• Snarveier som ikke dokumenteres. Selv om snarveiene er teknisk korrekte, bør brukeren informeres om at de finnes og hvordan de deaktiveres.

Sjekk nettsiden din for alle steder der keydown eller keypress brukes med enkle tegn. Sørg for at hver snarvei enten krever en modifikasjonstast, kan slås av, kan endres, eller bare er aktiv når den relevante komponenten har fokus.