Hopp til hovedinnhold
UUKontroll logo UUKontroll

Tilby alternativer til komplekse bevegelser (WCAG 2.5.1)

Funksjonalitet som krever komplekse bevegelser som sveip eller flerfinger-gester må ha et enklere alternativ.

wcag niva-a navigasjon

Sveip til høyre for å se neste bilde. Knip to fingre sammen for å zoome ut. Tegn en sirkel for å gå tilbake. Disse gestene føles naturlige for mange, men for en bruker med begrenset motorikk i hendene er de rett og slett umulige å utføre. WCAG 2.5.1 sier at all funksjonalitet som er avhengig av slike bevegelser, også må kunne utføres med en enkel handling - som et klikk eller et trykk.

Hva sier kravet?

WCAG 2.5.1 «Pekerbevegelser» er et nivå A-krav som handler om to typer gester:

  • Flerepunktsgester (multipoint): Handlinger som krever mer enn én finger, som knipe-for-å-zoome med to fingre eller rotere med tre fingre
  • Stibevegelser (path-based): Handlinger der pekeren må følge en bestemt bane, som sveip, dra-og-slipp langs en sti, eller tegning av former

Kravet sier at for all funksjonalitet som bruker slike gester, skal det finnes et alternativ med en enkel pekerbevegelse - et enkelt klikk, trykk eller tastetrykk. Du trenger ikke fjerne gestene - de kan fortsatt være tilgjengelige for brukere som foretrekker dem - men det må finnes en enklere vei til samme funksjon.

Unntaket er situasjoner der gesten er essensiell for selve funksjonen, som frihåndstegning i en tegneapp. Men selv da bør du vurdere om det finnes alternativer.

Hvorfor er dette viktig?

Mange brukere kan ikke utføre komplekse gester:

  • Brukere med motoriske funksjonsnedsettelser som tremor, leddgikt, cerebral parese eller amputasjon kan ha problemer med å koordinere flere fingre eller følge en nøyaktig bevegelse
  • Brukere med midlertidige skader - en bandasjert finger, en arm i gips eller senebetennelse gjør presise bevegelser smertefulle eller umulige
  • Eldre brukere med redusert finmotorikk som sliter med sveipebevegelser
  • Brukere av alternative pekeenheter som hodestyring, øyestyring, munnpinne eller en enkelt bryterknapp - disse enhetene støtter typisk bare enkle klikk
  • Brukere av stylus eller tegnepenn som bare har én kontaktpunkt og ikke kan utføre flerfinger-gester

Dessuten er gester ofte usynlige for brukeren. Det er ingen visuell indikasjon på at du kan sveipe for å se neste bilde - du må bare vite det. Knapper og piler er derimot synlige og selvforklarende.

Slik oppfyller du kravet

Bildekaruseller og gallerier

Karuseller er det vanligste stedet der sveip brukes som eneste navigasjon. Løsningen er enkel - legg til synlige navigasjonsknapper:

<div class="karusell" role="region" aria-label="Produktbilder" aria-roledescription="karusell">
  <div class="karusell-innhold">
    <img src="/bilde-1.jpg" alt="Produktet sett forfra">
    <!-- Flere bilder -->
  </div>

  <button class="karusell-forrige" aria-label="Forrige bilde" onclick="forrigeBilde()">
    &#8592;
  </button>
  <button class="karusell-neste" aria-label="Neste bilde" onclick="nesteBilde()">
    &#8594;
  </button>

  <!-- Bildeindikatorer som også fungerer som navigasjonsknapper -->
  <div class="karusell-indikatorer" role="tablist">
    <button role="tab" aria-selected="true" aria-label="Bilde 1 av 4" onclick="gaaTilBilde(0)"></button>
    <button role="tab" aria-selected="false" aria-label="Bilde 2 av 4" onclick="gaaTilBilde(1)"></button>
    <button role="tab" aria-selected="false" aria-label="Bilde 3 av 4" onclick="gaaTilBilde(2)"></button>
    <button role="tab" aria-selected="false" aria-label="Bilde 4 av 4" onclick="gaaTilBilde(3)"></button>
  </div>
</div>

Sveip kan fortsatt fungere i tillegg - men knappene gir alle brukere en alternativ vei.

Kartløsninger

Interaktive kart bruker ofte knipe-for-å-zoome og dra-for-å-flytte. Tilby knapper for de samme funksjonene:

<div class="kart-container">
  <div id="kart" role="application" aria-label="Kart">
    <!-- Kartinnhold -->
  </div>

  <div class="kart-kontroller">
    <button onclick="zoomInn()" aria-label="Zoom inn">+</button>
    <button onclick="zoomUt()" aria-label="Zoom ut">−</button>
    <div class="retningskontroller">
      <button onclick="flyttOpp()" aria-label="Flytt kartet opp">↑</button>
      <button onclick="flyttNed()" aria-label="Flytt kartet ned">↓</button>
      <button onclick="flyttVenstre()" aria-label="Flytt kartet til venstre">←</button>
      <button onclick="flyttHoyre()" aria-label="Flytt kartet til høyre">→</button>
    </div>
  </div>
</div>

De fleste kartbiblioteker (Google Maps, Leaflet, Mapbox) har innebygde zoomknapper. Sørg for at disse er aktivert og ikke skjult med CSS.

Sorterbare lister og dra-og-slipp

Dra-og-slipp for å sortere elementer er en stibevegelse. Tilby en alternativ mekanisme, for eksempel opp/ned-knapper eller en sorteringsmeny:

<ul class="sorterbar-liste">
  <li draggable="true">
    <span>Oppgave 1</span>
    <div class="sortering-knapper">
      <button aria-label="Flytt Oppgave 1 opp" onclick="flyttOpp(0)">↑</button>
      <button aria-label="Flytt Oppgave 1 ned" onclick="flyttNed(0)">↓</button>
    </div>
  </li>
  <li draggable="true">
    <span>Oppgave 2</span>
    <div class="sortering-knapper">
      <button aria-label="Flytt Oppgave 2 opp" onclick="flyttOpp(1)">↑</button>
      <button aria-label="Flytt Oppgave 2 ned" onclick="flyttNed(1)">↓</button>
    </div>
  </li>
</ul>

Tredjepartskomponenter

Sjekk at tredjepartskomponenter du bruker (kartbiblioteker, karusellbiblioteker, bildegallerier) tilbyr alternativer til gester. De fleste etablerte biblioteker gjør det - men det er ikke alltid aktivert som standard.

Vanlige feil

  • Bildekaruseller med bare sveip-navigasjon og ingen synlige knapper for forrige/neste
  • Kartkomponenter der zoom-knapper er skjult med CSS, slik at knipe-for-å-zoome er eneste alternativ
  • Dra-og-slipp uten alternativ for å sortere, flytte eller endre rekkefølge på elementer
  • Innloggingsløsninger med sveip-mønster (pattern lock) uten en PIN-kode eller passord-alternativ
  • Datovalgverktøy som krever sveip for å navigere mellom måneder i stedet for å tilby piltaster eller knapper
  • Bildebeskjæring der brukeren må dra et utvalgsområde uten mulighet for å taste inn verdier

Tenk på det slik: for hver gest på nettstedet ditt, bør det finnes en knapp som gjør det samme. Det gjør løsningen din brukbar for alle - ikke bare de med to friske hender og god finmotorikk.