WCAG 2.2.2: Pausa, stoppa, dölj

Vad den här regeln innebär

WCAG 2.2.2 (Pausa, stoppa, dölj) är ett framgångskriterium på nivå A under principen Hanterbar. Det styr allt innehåll som rör sig, blinkar, rullar eller uppdateras automatiskt på en sida. Regeln fastställer två tydliga krav beroende på hur innehållet beter sig:

För rörligt, blinkande eller rullande innehåll som startar automatiskt, varar längre än fem sekunder och presenteras tillsammans med annat innehåll, måste användare få en mekanism för att pausa, stoppa eller dölja det. Detta omfattar CSS-animationer, JavaScript-styrda karuseller, löpande text (marquee), blinkande element, rullande tickers och animerade banners.

För automatiskt uppdaterande innehåll — såsom livescore-tavlor, aktietickers, sociala medieflöden eller nyhetsrubriker som uppdateras med intervall — måste användare kunna pausa, stoppa, dölja eller styra frekvensen på uppdateringarna.

För att klara kravet måste en tydligt hanterbar kontroll (en knapp, tangentbordsgenväg eller liknande mekanism) finnas tillgänglig före eller tillsammans med det animerade innehållet, så att användare kan frysa eller ta bort det utan att behöva hjälp. Själva kontrollen måste vara tillgänglig — nåbar med tangentbord, korrekt märkt och användbar utan mus.

Ett underkännande inträffar när något av följande finns: ett <blink>-element eller CSS text-decoration: blink som inte kan stoppas; ett <marquee>-element utan pausmekanism; en animerad karusell som spelas upp på obestämd tid utan pausknapp; en nyhetswidget som auto-uppdateras och inte kan styras; eller en loopande bakgrundsvideo utan möjlighet att stoppa den.

WCAG definierar två uttryckliga undantag. För det första gäller inte regeln för animationer som varar fem sekunder eller mindre, eftersom kortvarig rörelse som upphör av sig själv inte skapar en långvarig distraktion. För det andra gäller den inte när animationen är väsentlig för aktiviteten — till exempel ett realtidsgränssnitt för aktiehandel där livepriser är hela sidans syfte, och att pausa dem skulle förändra innehållets natur i grunden. Dessa undantag är snäva och ska inte användas som en generell ursäkt för att hoppa över implementering.

Varför det är viktigt

Rörligt och blinkande innehåll skapar allvarliga hinder för flera olika grupper av personer med funktionsnedsättning, och konsekvenserna sträcker sig från mild distraktion till faktisk medicinsk skada.

Personer med uppmärksamhetsstörning/hyperaktivitet (ADHD) eller andra kognitiva funktionsnedsättningar har ofta omöjligt att fokusera på sidans primära innehåll när animerade element finns i deras perifera synfält. Den mänskliga hjärnan är neurologiskt programmerad att uppmärksamma rörelse som en överlevnadsmekanism, och personer med ADHD upplever denna dragning betydligt starkare än neurotypiska användare. En rullande ticker längst ned på en nyhetssida eller en animerad bannerannons i en sidokolumn kan göra det i praktiken omöjligt att läsa huvudartikeln.

Personer med vestibulära störningar — inklusive labyrintit, godartad lägesyrsel (BPPV) och Ménières sjukdom — kan uppleva illamående, yrsel och desorientering när de utsätts för vissa typer av rörelse på skärmen. För dessa användare är en loopande karusell eller parallaxrullning inte bara irriterande; det kan orsaka fysisk sjukdom som tvingar dem att lämna sidan helt. Vestibulära störningar påverkar uppskattningsvis 35% av vuxna över 40 år enbart i USA.

Personer med ljuskänslig epilepsi riskerar anfall av innehåll som blinkar eller fladdrar i vissa frekvenser. Även om blinkande innehåll mer direkt behandlas av WCAG 2.3.1, kan blinkande innehåll som omfattas av 2.2.2 också vara en utlösande faktor. Världshälsoorganisationen uppskattar att epilepsi påverkar cirka 50 miljoner människor världen över.

För skärmläsaranvändare skapar automatiskt uppdaterande innehåll ett lika störande problem. När en live-region uppdateras, läser skärmläsare upp det nya innehållet, vilket avbryter användaren mitt i en mening när hen lyssnar på något annat. Utan möjlighet att pausa uppdateringar blir det extremt svårt att navigera på en sida med liveinnehåll.

Fundera på följande verkliga scenario: en användare med ADHD genomför en banköverföring online på en turkisk e-handelsbankportal. En roterande reklambanner växlar mellan fyra erbjudanden var tredje sekund i sidhuvudet. Användaren kan inte koncentrera sig på att skriva in rätt kontonummer. Hen gör ett avskriftsfel, överföringen misslyckas och hen måste upprepa hela processen. Om bannern hade haft en pausknapp hade uppgiften varit okomplicerad. Detta är inte hypotetiskt — det är en dokumenterad kategori av interaktionsfel som tillgänglighetsgranskare regelbundet stöter på.

Utöver tillgång för personer med funktionsnedsättning förbättrar borttagning av okontrollerbar rörelse användbarheten för alla, minskar kognitiv belastning och kan förbättra SEO-signaler såsom Core Web Vitals-poäng genom att minska layoutförskjutningar och onödig JavaScript-exekvering.

Relaterade Axe-core-regler

• blink: Den här regeln kontrollerar förekomsten av det föråldrade HTML-elementet <blink> och av CSS-egenskaper som ger blinkande text (historiskt text-decoration: blink). <blink>-elementet gör att text blinkar av och på kontinuerligt utan någon inbyggd mekanism för användaren att stoppa det. Axe flaggar varje förekomst av detta element som en överträdelse eftersom det direkt bryter mot 2.2.2 — det finns inget förenligt användningsfall för <blink>. Regeln varnar också för CSS-styrda blinkeffekter där animationen inte kan pausas. Automatisk detektering är tillförlitlig här eftersom elementet och egenskapen är syntaktiskt identifierbara i DOM:en och beräknade stilar.
• marquee: Den här regeln kontrollerar förekomsten av HTML-elementet <marquee>, som gör att text eller innehåll rullar horisontellt eller vertikalt över skärmen i en kontinuerlig loop. <marquee>-elementet har ingen inbyggd, tillgänglig pausmekanism och är föråldrat i HTML5. Axe flaggar varje förekomst som en överträdelse. Liksom <blink> är detektering okomplicerad eftersom elementet är syntaktiskt identifierbart. Dock kan automatiska verktyg inte fånga alla överträdelser av 2.2.2 — CSS-animationer, JavaScript-karuseller, auto-uppdaterande AJAX-widgets och loopande HTML5-videor kräver alla manuell granskning eftersom mekanismen för paus (eller dess frånvaro) bara kan avgöras av en mänsklig testare som utvärderar hela den interaktiva upplevelsen.

Hur man testar

1. Automatisk skanning med axe DevTools eller Lighthouse: Öppna sidan i Chrome eller Firefox. Öppna DevTools (F12), gå till panelen för axe DevTools eller Lighthouse Accessibility-auditen och kör en fullständig skanning. Titta specifikt efter överträdelser taggade som blink eller marquee i resultaten. Varje överträdelse inkluderar DOM-noden, påverkningsnivån (serious eller critical) och en länk till vägledning för åtgärd. Observera att en ren automatisk skanning inte innebär full efterlevnad — gå vidare till manuella steg.
2. Manuell inspektion av CSS- och JavaScript-animation: Granska visuellt sidan efter allt innehåll som rör sig, rullar, blinkar eller uppdateras automatiskt. Kontrollera för varje förekomst om en kontroll för att pausa, stoppa eller dölja finns och är synlig före eller tillsammans med det animerade innehållet. Verifiera att kontrollen är nåbar med tangentbord (Tab till den) och att tryck på Enter eller mellanslag aktiverar den. Kontrollera att aktivering av kontrollen faktiskt stoppar rörelsen och inte bara minskar dess hastighet.
3. Test med enbart tangentbord: Koppla bort musen. Använd Tab-tangenten för att navigera på hela sidan. Bekräfta att du kan nå paus-/stoppkontrollen för varje animerat element enbart med tangentbordet, och att kontrollen har en synlig fokusindikator. Om du inte kan nå kontrollen, eller om du måste tabba genom det animerade innehållet först (vilket kan vara desorienterande), är det ett underkännande.
4. Skärmläsartest med NVDA och Firefox: Starta NVDA, öppna sidan i Firefox och lyssna efter live-regionsmeddelanden som avbryter läsningen. Navigera till automatiskt uppdaterande innehåll och bekräfta att användning av pauskontrollen tystar NVDA-annonseringarna. Testa med JAWS och Chrome samt VoiceOver och Safari på macOS enligt samma procedur.
5. Kontroll av automatiskt uppdaterande innehåll: För innehåll som uppdateras med timer (nyhetsflöden, instrumentpaneler, resultattavlor), notera uppdateringsintervallet. Bekräfta att det finns en mekanism för att pausa uppdateringarna eller styra frekvensen. Utlös uppdateringen manuellt om möjligt och verifiera att skärmläsare bara annonserar den när användaren själv väljer det, inte ofrivilligt.
6. Test av inställning för minskad rörelse: Aktivera inställningen för hjälpmedel "Minska rörelse" i ditt operativsystem. Ladda om sidan och verifiera att animationer respekterar CSS-medieregeln prefers-reduced-motion. Även om detta inte strikt krävs av WCAG 2.2.2 är det en stark kompletterande teknik och förväntas i allt högre grad av granskare.

Hur man åtgärdar

Föråldrat <marquee>-element — Felaktigt

<!-- Scrolling text with no pause control; fails 2.2.2 -->
<marquee behavior='scroll' direction='left'>
  Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
</marquee>

Föråldrat <marquee>-element — Korrekt

<!-- Replaced with a CSS animation that respects prefers-reduced-motion
     and includes an accessible pause button -->
<div class='ticker-wrapper'>
  <button
    id='ticker-toggle'
    aria-label='Pause news ticker'
    aria-pressed='false'
    onclick='toggleTicker()'
  >
    Pause
  </button>
  <div class='ticker' id='news-ticker' aria-live='off' aria-atomic='false'>
    <p class='ticker-content'>
      Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
    </p>
  </div>
</div>

<!-- The CSS should define .ticker-content with animation,
     and a .paused class that sets animation-play-state: paused.
     The JS toggleTicker() function adds/removes .paused
     and updates aria-pressed and aria-label accordingly. -->

Föråldrat <blink>-element — Felaktigt

<!-- Blink element causes continuous unstoppable flashing; fails 2.2.2 -->
<p>Your session will expire soon. <blink>Please save your work!</blink></p>

Föråldrat <blink>-element — Korrekt

<!-- Static, high-contrast warning with role='alert' for screen readers.
     No blinking required to communicate urgency. -->
<p>
  Your session will expire soon.
  <strong role='alert'>Please save your work!</strong>
</p>

Automatspelande karusell utan pauskontroll — Felaktigt

<!-- Carousel advances every 4 seconds with no way to stop it; fails 2.2.2 -->
<div class='carousel' data-autoplay='true' data-interval='4000'>
  <div class='slide active'><img src='promo1.jpg' alt='Summer Sale'></div>
  <div class='slide'><img src='promo2.jpg' alt='New Arrivals'></div>
  <div class='slide'><img src='promo3.jpg' alt='Free Shipping'></div>
</div>

Automatspelande karusell utan pauskontroll — Korrekt

<!-- Carousel includes a visible, keyboard-accessible pause button.
     The aria-label updates dynamically to reflect current state.
     Autoplay also stops on focus/hover (WCAG best practice). -->
<div
  class='carousel'
  id='promo-carousel'
  aria-roledescription='carousel'
  aria-label='Promotional offers'
>
  <button
    id='carousel-pause'
    aria-label='Pause carousel'
    aria-pressed='false'
    class='carousel-pause-btn'
  >
    <!-- SVG pause icon or text label -->
    Pause
  </button>
  <div
    class='carousel-track'
    aria-live='off'
  >
    <div
      class='slide active'
      role='group'
      aria-roledescription='slide'
      aria-label='1 of 3'
    >
      <img src='promo1.jpg' alt='Summer Sale — up to 50% off selected items'>
    </div>
    <div
      class='slide'
      role='group'
      aria-roledescription='slide'
      aria-label='2 of 3'
    >
      <img src='promo2.jpg' alt='New Arrivals — browse the latest collection'>
    </div>
  </div>
</div>

Automatiskt uppdaterande widget för livedata — Felaktigt

<!-- Widget refreshes every 10 seconds via JS with no user control; fails 2.2.2 -->
<div id='stock-widget' aria-live='polite'>
  <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
</div>

Automatiskt uppdaterande widget för livedata — Korrekt

<!-- Widget includes a pause button; aria-live is set to 'off' when paused
     so screen readers are not interrupted during paused state. -->
<div class='stock-widget-container'>
  <button
    id='stock-pause'
    aria-label='Pause stock updates'
    aria-pressed='false'
  >
    Pause updates
  </button>
  <div id='stock-widget' aria-live='polite' aria-atomic='true'>
    <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
  </div>
</div>
<!-- JS should toggle aria-live between 'polite' and 'off',
     stop the setInterval timer when paused, and update
     aria-pressed and aria-label on the button accordingly. -->

Vanliga misstag

• Att använda <marquee>- eller <blink>-element någonstans i produktions-HTML, även för "retro" eller dekorativ stil — båda elementen är föråldrade, semantiskt meningslösa och misslyckas alltid med 2.2.2 utan annan åtgärdsväg än borttagning.
• Att lägga till en pausknapp som bara är synlig vid mus-hover, vilket gör den otillgänglig för tangentbordsanvändare som behöver den mest och som typiskt navigerar med Tab snarare än genom att hovra.
• Att implementera en pausknapp som inte kan nås med Tab-tangenten före det animerade innehållet i DOM:en, vilket tvingar användare att navigera genom den desorienterande rörelsen innan de kan stoppa den.
• Att använda animation-play-state: paused i CSS för att stoppa animationen visuellt, men inte också inaktivera JavaScript-loopen setInterval eller requestAnimationFrame som driver innehållsuppdateringarna — det visuella intrycket stannar men DOM fortsätter att ändras och avbryter fortfarande skärmläsare.
• Att sätta aria-live='polite' på en karusell eller ticker och låta den vara aktiv även när användaren har tryckt på paus — live-regionen fortsätter att annonsera DOM-förändringar för skärmläsaranvändare även om den visuella animationen är fryst.
• Att förlita sig på autoplay=false på ett <video>-element utan att verifiera beteendet i olika webbläsare; vissa kombinationer av webbläsare och insticksprogram åsidosätter detta attribut, vilket gör att videor spelas upp automatiskt mot författarens avsikt och användarens förväntan.
• Att behandla femsekundersundantaget som en allmän respitperiod och bygga en karusell som visar varje bild i fyra sekunder i tron att varje enskild bildövergång är under fem sekunder — animationen som helhet är kontinuerlig och varar betydligt längre än fem sekunder, så undantaget gäller inte.
• Att tillhandahålla en pauskontroll som stoppar animationen men inte visuellt indikerar pausat läge, vilket lämnar användare osäkra på om deras åtgärd haft effekt — knappen måste återspegla sitt aktuella tillstånd, helst med aria-pressed och genom att uppdatera sin etikett mellan "Pause" och "Play".
• Att tillämpa prefers-reduced-motion endast på CSS-övergångar och ignorera JavaScript-styrda animationer som körs oberoende av CSS, vilket innebär att användare som har aktiverat systeminställningen för minskad rörelse fortfarande upplever rörelse på sidan.
• Att placera pauskontrollen utanför tangentbordets tabb-ordning genom att sätta tabindex='-1' eller genom att kapsla in den i en behållare med display:none som endast visas villkorligt med musinteraktion — kontrollen måste alltid kunna nås via tangentbordsnavigering.

Relation till Turkiets tillgänglighetsreglering

Turkiets presidentdekret nr 2025/10, publicerat i den officiella tidningen (Resmî Gazete) med nummer 32933 den 21 juni 2025, fastställer obligatoriska krav på webb- och mobiltillgänglighet i linje med WCAG 2.2. WCAG 2.2.2 Pausa, stoppa, dölj är ett kriterium på nivå A, vilket innebär att det ligger på den mest grundläggande efterlevnadsnivån och är obligatoriskt utan undantag för alla aktörer som omfattas av dekretet.

Dekretet anger stegvisa tidslinjer för efterlevnad: offentliga institutioner och organ måste uppnå full överensstämmelse med nivå A inom ett år från dekretets publiceringsdatum, och privata aktörer måste göra det inom två år. Det finns inget frivilligt anslutningsförfarande — dekretet innebär en rättslig skyldighet, och digitala tillgångar som inte uppfyller kraven omfattas av administrativ tillsyn och potentiella verkställighetsåtgärder.

De aktörer som omfattas av dekretet inkluderar ett brett tvärsnitt av turkiska digitala tjänster: alla offentliga institutioner och statliga organ; e-handelsplattformar som är verksamma i Turkiet; banker och finansiella tjänsteinstitutioner; sjukhus och privata vårdgivare; teleoperatörer med 200,000 eller fler abonnenter; resebyråer; privata transportföretag; och privatskolor med tillstånd från utbildningsministeriet (Millî Eğitim Bakanlığı, MoNE).

För dessa aktörer har WCAG 2.2.2 direkta och praktiska konsekvenser. En e-handelssajt med en automatspelande produktkarusell utan pausknapp bryter mot kravet. En banks internetbankportal som använder en rullande ticker för säkerhetsmeddelanden utan stoppkontroll är icke-förenlig. En sjukhusets bokningssida för tider som använder animerade varningar som inte kan stoppas uppfyller inte kravet. En teleoperatörs startsida med en loopande bakgrundsvideo utan synlig stoppkontroll måste åtgärda detta före tidsfristen.

Utöver den rättsliga skyldigheten ligger turkisk tillgänglighetslagstiftning i linje med den bredare europeiska utvecklingen, exemplifierad av EU:s webbtillgänglighetsdirektiv och den europeiska tillgänglighetsakten (EAA). När turkiska företag expanderar till europeiska marknader eller betjänar europeiska användare blir överensstämmelse med WCAG 2.2 nivå A — inklusive kriterium 2.2.2 — ett dubbelt efterlevnadskrav. Korrekt implementering av Pausa, stoppa, dölj är därför både en inhemsk rättslig nödvändighet och en strategisk tillgång för turkiska organisationer med internationell digital närvaro.