Hopp til hovedinnhold
UUKontroll logo UUKontroll

Tilby alternativer til bevegelsesstyring (WCAG 2.5.4)

Funksjonalitet styrt av enhetsbevegelse eller brukerbevegelse må også kunne brukes via vanlige kontroller.

wcag niva-a navigasjon

Rist telefonen for å angre. Vipp den for å scrolle. Vri den sidelengs for å bytte visning. Bevegelsesstyring kan føles futuristisk og intuitivt, men for mange brukere er det en funksjon de aldri kan bruke. WCAG 2.5.4 sier at all funksjonalitet som styres av bevegelse - enten av enheten eller av brukeren - også må kunne utføres med vanlige grensesnittkontroller.

Hva sier kravet?

WCAG 2.5.4 «Bevegelsesaktivering» er et nivå A-krav som dekker to typer bevegelse:

  • Enhetsbevegelse: Funksjoner som utløses av å bevege enheten - risting, vipping, rotasjon, helning
  • Brukerbevegelse: Funksjoner som utløses av brukerens bevegelse fanget av kameraet eller andre sensorer

Kravet stiller to betingelser:

  1. Alternativ kontroll: All funksjonalitet som bruker bevegelse, skal også kunne utføres via vanlige brukergrensesnittkomponenter (knapper, menyer, etc.)
  2. Mulighet for å deaktivere: Brukeren skal kunne slå av bevegelsesresponsen for å unngå utilsiktet aktivering

Det finnes unntak for situasjoner der bevegelsen er essensiell - for eksempel en skritteller som selvfølgelig trenger å registrere bevegelse - og for tilfeller der deaktivering av bevegelsesrespons ville gjøre funksjonen ubrukelig.

Hvorfor er dette viktig?

Bevegelsesstyring forutsetter at brukeren fysisk kan bevege enheten eller kroppen sin, noe som langt fra gjelder alle:

  • Rullestolbrukere kan ha enheten montert på rullestolen i en fast posisjon og kan ikke riste eller vippe den
  • Brukere med motoriske funksjonsnedsettelser som spasmer, tremor eller begrenset bevegelighet kan enten ikke utføre bevegelsen, eller utløser den utilsiktet
  • Brukere med enheten i et stativ - på et skrivebord, i en bilholder eller i en tilgjengelighetsmontering - kan ikke bevege den
  • Brukere med proteser kan ha begrenset evne til å utføre raske eller presise bevegelser
  • Alle i situasjoner der bevegelse er upraktisk - på en buss, i et møte, i sengen

Utilsiktet aktivering er et like stort problem som manglende mulighet. Brukere med tremor kan utilsiktet utløse riste-funksjoner. Brukere som legger fra seg telefonen kan utilsiktet endre visning fordi enheten registrerer rotasjonen. Uten mulighet til å deaktivere bevegelsesrespons, blir dette en kilde til konstant frustrasjon.

Slik oppfyller du kravet

Rist-for-å-angre

«Shake to undo» er en av de mest kjente bevegelsesstyringene, brukt i iOS og i mange apper. Hvis nettappen din implementerer noe lignende, tilby en knapp som alternativ:

<div class="verktoeylinje">
  <button onclick="angre()" aria-label="Angre siste handling">
    ↩ Angre
  </button>
  <button onclick="gjoerOm()" aria-label="Gjør om siste angrede handling">
    ↪ Gjør om
  </button>
</div>

<script>
// Bevegelsesstyring som tillegg - ikke eneste metode
let sisteRisting = 0;

window.addEventListener('devicemotion', (e) => {
  if (!bevegelsesstyringAktivert) return; // Sjekk brukerens innstilling

  const akselerasjon = e.accelerationIncludingGravity;
  const styrke = Math.abs(akselerasjon.x) + Math.abs(akselerasjon.y) + Math.abs(akselerasjon.z);

  if (styrke > 30 && Date.now() - sisteRisting > 1000) {
    sisteRisting = Date.now();
    angre();
  }
});
</script>

Vipp-for-å-scrolle eller navigere

Noen nettapper bruker enhetens orientering for å styre innhold - for eksempel å vippe enheten for å scrolle i en lang liste eller navigere i et panoramabilde:

<div class="panorama-container">
  <img src="panorama.jpg" alt="Panoramabilde av byen">

  <!-- Alternative kontroller for brukere som ikke kan vippe enheten -->
  <div class="panorama-kontroller">
    <button onclick="scrollPanoramaVenstre()" aria-label="Scroll bilde til venstre">←</button>
    <button onclick="scrollPanoramaHoyre()" aria-label="Scroll bilde til høyre">→</button>
  </div>
</div>

<script>
let bevegelsesstyringAktivert = localStorage.getItem('bevegelse') !== 'av';

if (bevegelsesstyringAktivert && window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', (e) => {
    // Bruk enhetens helning for å flytte panoramabildet
    const helning = e.gamma; // -90 til 90 grader
    oppdaterPanoramaPosisjon(helning);
  });
}
</script>

Orienteringslåsing

Mange nettsider og apper bytter layout basert på om enheten holdes i portrett- eller landskapsmodus. Selv om CSS-mediespørringer for orientering er et normalt responsivt designmønster, bør brukeren kunne tvinge en bestemt orientering hvis de trenger det:

/* Responsivt design basert på orientering - dette er greit */
@media (orientation: landscape) {
  .layout {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  .layout {
    flex-direction: column;
  }
}

Merk at WCAG 1.3.4 «Orientering» (et separat krav) sier at innhold ikke skal begrenses til en enkelt orientering med mindre det er essensielt. Her handler 2.5.4 mer om at bevegelsesbaserte funksjoner knyttet til orientering skal ha alternativer.

Gi brukeren kontroll

Tilby alltid en innstilling for å slå av bevegelsesstyring:

<div class="innstillinger">
  <label>
    <input type="checkbox" id="bevegelse-toggle"
           onchange="oppdaterBevegelsesinnstilling(this.checked)">
    Aktiver bevegelsesstyring (rist for å angre, vipp for å navigere)
  </label>
</div>

<script>
function oppdaterBevegelsesinnstilling(aktivert) {
  localStorage.setItem('bevegelse', aktivert ? 'paa' : 'av');
  bevegelsesstyringAktivert = aktivert;
}

// Start med brukerens lagrede preferanse
const lagretInnstilling = localStorage.getItem('bevegelse');
bevegelsesstyringAktivert = lagretInnstilling !== 'av';
document.getElementById('bevegelse-toggle').checked = bevegelsesstyringAktivert;
</script>

Kamerabevegelse og gestuell styring

Nettapper som bruker kameraet til å tolke brukerens bevegelser - for eksempel hodebevegelsessporing eller håndbevegelser - må også tilby alternativer:

<!-- Alternativ til kamerabasert navigasjon -->
<div class="presentasjon-kontroller">
  <p>Du kan navigere med hodebevegelser eller bruke knappene under:</p>
  <button onclick="forrigeSlide()">Forrige slide</button>
  <button onclick="nesteSlide()">Neste slide</button>
</div>

Vanlige feil

  • Rist-for-å-angre som eneste angre-funksjon - uten en synlig Angre-knapp i grensesnittet
  • Vipp-for-å-scrolle uten knapper som alternativ navigasjonsmetode
  • Enhetsorientering som utløser funksjoner (ikke bare layoutendring) uten mulighet for å deaktivere
  • Ingen innstilling for å slå av bevegelsesstyring - brukere med tremor kan utilsiktet aktivere funksjoner hele tiden
  • Kamerabevegelse uten alternativ - for eksempel «nikk for å bekrefte» uten en knapp
  • Spillignende interaksjoner der enheten brukes som kontroller (vippe for å styre) uten tastatur- eller knappealternativer

Bevegelsesstyring er et fint tillegg for brukere som ønsker det, men det skal aldri være den eneste måten å utføre en funksjon på. Husk den enkle tommelfingerregelen: for hver bevegelse skal det finnes en knapp.