Kontroll over innhold

Nettsider med bevegelig innhold kan virke moderne og engasjerende, men for mange brukere skaper de store problemer. Automatisk avspillende videoer, roterende karuseller, blinkende bannere og animasjoner som kjører i bakgrunnen kan gjøre det vanskelig – og noen ganger umulig – å bruke nettsiden. WCAG-suksesskriteriet 2.2.2 «Pause, stopp, skjul» krever at brukerne alltid skal ha kontroll over innhold som beveger seg, blinker eller oppdateres automatisk.

Hva sier WCAG 2.2.2?

Suksesskriteriet 2.2.2 er et nivå A-krav, altså et absolutt minimumskrav. Det sier at alt innhold som starter automatisk, varer i mer enn fem sekunder, og vises samtidig med annet innhold, må kunne pauses, stoppes eller skjules av brukeren. Dette gjelder uavhengig av om innholdet er en video, en animasjon, en karusell eller en live-oppdatering.

Kjernen i kravet er enkel: brukeren skal bestemme hva som skjer på skjermen sin.

Hvorfor er dette viktig?

Det finnes mange grunner til at bevegelig innhold er problematisk:

• Konsentrasjonsvansker: For personer med ADHD eller kognitive utfordringer kan bevegelse i synsfeltet gjøre det umulig å fokusere på det de faktisk prøver å lese eller gjøre.
• Skjermlesere og hjelpemidler: Når innholdet endrer seg automatisk, kan skjermlesere miste posisjonen sin og begynne å lese fra feil sted. Brukeren mister kontekst og må starte på nytt.
• Epilepsi: Innhold som blinker raskt (mer enn tre ganger i sekundet) kan utløse epileptiske anfall. WCAG har et eget kriterium for dette (2.3.1), men det henger tett sammen med kontroll over innhold.
• Eldre brukere: Mange trenger mer tid til å lese og forstå innhold. Karuseller som bytter bilde hvert tredje sekund gir ikke nok tid.

Vanlige feil på norske nettsider

Autoavspillende video

Mange nettsider har en video som spiller av automatisk når du laster siden, ofte med lyd. Dette bryter ikke bare med WCAG 2.2.2, men også med 1.4.2 (lydkontroll). Sørg for at videoer alltid starter i pausemodus, eller at det finnes en tydelig pauseknapp.

Karuseller uten pauseknapp

Bildekaruseller er blant de vanligste elementene på forsider. Hvis karusellen roterer automatisk, må du gi brukeren en knapp for å stoppe den. Mange karusell-plugins har dette innebygget – sørg for at funksjonen er aktivert og at knappen er synlig.

<div class="karusell" role="region" aria-label="Bildegalleri">
  <div class="karusell-innhold">
    <!-- Slides her -->
  </div>
  <button class="karusell-pause" aria-label="Pause karusell">
    Pause
  </button>
  <button class="karusell-forrige" aria-label="Forrige bilde">&#8592;</button>
  <button class="karusell-neste" aria-label="Neste bilde">&#8594;</button>
</div>

CSS-animasjoner som aldri stopper

Laster-animasjoner, pulserende knapper og dekorative bevegelser kan distrahere. Respekter brukerens systeminnstillinger ved å bruke prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Meta-refresh

Noen eldre nettsider bruker <meta http-equiv="refresh"> for å laste siden på nytt automatisk. Dette er problematisk fordi brukeren mister posisjonen sin på siden og eventuelt data de har skrevet inn i skjemaer. Unngå denne teknikken helt, og bruk heller en knapp som lar brukeren oppdatere innholdet selv.

Praktiske tips for å fikse problemene

1. Sjekk alle autoavspillende elementer. Gå gjennom nettsiden din og finn alt som beveger seg av seg selv – videoer, karuseller, animasjoner, nyhetsfeeder og lignende.
2. Legg til pause- og stoppknapper. Hver bevegelig del av siden bør ha en tydelig og tilgjengelig knapp for å stoppe bevegelsen.
3. Bruk prefers-reduced-motion. Denne CSS-medieregelen lar deg respektere brukerens valg om å redusere bevegelse. Det er en enkel og effektiv måte å forbedre tilgjengeligheten på.
4. Unngå blinking. Ikke bruk CSS-animasjoner eller JavaScript som får elementer til å blinke. Utdaterte HTML-elementer som <blink> og <marquee> skal aldri brukes.
5. Gi nok tid. Hvis du har en karusell, la hvert bilde vises i minst syv sekunder, og stopp alltid rotasjonen når brukeren interagerer med elementet (for eksempel ved hover eller fokus).

Hva sjekker UU-Kontroll?

Vår skanner oppdager automatisk flere av disse problemene, blant annet autoavspillende video, bruk av <marquee> og <blink>, og meta-refresh-tagger. Vi gir deg konkrete anbefalinger for hva du bør fikse, slik at du enkelt kan sørge for at brukerne dine har full kontroll over innholdet på nettsiden din.

Å gi brukeren kontroll handler til syvende og sist om respekt. Respekt for at folk har ulike behov, ulike evner og ulike preferanser. En pause-knapp koster lite å implementere, men kan utgjøre en enorm forskjell for den som trenger den.