WCAG 2.2.2 Paus, Stopp, Dölj

Det som rör sig, blinkar eller rullar av sig självt i mer än fem sekunder, bredvid annat innehåll, ska gå att pausa, stoppa eller dölja. Det gäller också information som uppdateras automatiskt. Rörelse drar blicken till sig och gör det svårt att läsa resten av sidan, och den som läser långsamt hinner inte läsa en bild i en karusell innan den byts. I en webbutik är det oftast karusellen på startsidan och banderollen med erbjudanden som rör sig.

• Karusellen på startsidan byter bild var fjärde sekund och saknar pausknapp.
• Banderollen med ”Fri frakt” och ”Nyheter varje vecka” rullar i sidled hela tiden.
• En film spelar i en loop som bakgrund bakom rubriken och går inte att stoppa.
• Rea-etiketten på produkterna blinkar så länge sidan är öppen.
• Karusellen pausar när muspekaren är över den men inte när den får fokus med tangentbordet.

Ge karuseller och filmer som rör sig en synlig pausknapp, och stanna rörelsen när delen får fokus eller muspekaren. Visa ingen rörelse alls för den som har valt minskad rörelse i sitt system.

<section aria-roledescription="karusell" aria-label="Erbjudanden">
  <button id="paus" aria-pressed="false">Pausa bildspelet</button>
  ...
</section>

<script>
  const minskad = matchMedia("(prefers-reduced-motion: reduce)").matches;
  let timer = minskad ? null : setInterval(nastaBild, 6000);
  document.getElementById("paus").addEventListener("click", (e) => {
    clearInterval(timer);
    timer = null;
    e.currentTarget.setAttribute("aria-pressed", "true");
  });
</script>

Kontrollera själv

Månadsgranskningen kör axe-core, som bara larmar för de gamla elementen blink och marquee. Karuseller, filmer och animationer som byggs med skript eller CSS hittar ingen av de automatiska kontrollerna. Öppna startsidan och vänta tio sekunder: allt som fortfarande rör sig ska ha en knapp som stoppar det.

• Understanding 2.2.2 Pause, Stop, Hide hos W3C (på engelska)
• Kravet i W3C:s svenska översättning

Det svenska namnet kommer från W3C:s auktoriserade svenska översättning, som gäller WCAG 2.0. Kravet 2.2.2 har samma lydelse i WCAG 2.1.