Pausa, stoppa, dölj
Rörligt, blinkande, rullande eller automatiskt uppdaterat innehåll som varar mer än fem sekunder måste kunna pausas, stoppas eller döljas av användaren. Täcker karuseller, löptextstavar, nyhetstickets, animerade annonser och automatiskt uppdaterade flöden.
Vad kriteriet kräver
För innehåll som uppfyller alla tre av (a) rör sig, blinkar, rullar eller uppdateras automatiskt, (b) startar automatiskt, (c) varar mer än fem sekunder och visas parallellt med annat innehåll, måste användaren ha en mekanism för att pausa, stoppa eller dölja det. Detsamma gäller automatiskt uppdaterat innehåll som inte är rörelse (direktnyhetsflöden, resultattavlor, chatt).
Undantag: där rörelsen är väsentlig för aktiviteten (en video som spelas, en animationshandledning), och där innehållet är det enda på skärmen (en inläsningsspinnare innan innehåll visas).
Hur man uppfyller det
- Lägg till en synlig Pausa/Spela-knapp i varje karusell, bildspel eller automatiskt framskridande banner. Gör den till det första fokuserbara elementet i karusellwidgeten.
- Pausa karuseller automatiskt vid hovring och tangentbordsfokus — men användaren måste fortfarande kunna stoppa dem helt.
- För nyhetstickets, löptextstavarna och aktiekursstavar, exponera en pausknapp på samma rad, med minst 24×24 storlek.
- För automatiskt uppdaterade instrumentpaneler (Kibana, Grafana, direktsport), ge användaren en väljare för uppdateringsintervall inklusive ett alternativ “Endast manuell uppdatering”.
- Animerade GIF-bilder som loopas oändligt bör ersättas med
<video>som exponerar inbyggda kontroller, eller med ett klicka-för-att-spela-mönster.
Vanliga fel
- Hjältekaruseller som roterar var tredje till femte sekund utan pauskontroll — fortfarande det vanligaste 2.2.2-felet i granskningar.
- Videobakgrunder med automatisk uppspelning utan kontroller, särskilt på marknadsföringssidor.
- Nyhetssajters tickers som rullar horisontellt utan pausknapp.
- Animerade SVG-illustrationer på landningssidor som loopas för evigt utan möjlighet att stoppa.
- Toast-notifieringar som staplas kontinuerligt från ett direktflöde utan möjlighet att tysta.
axe och Lighthouse kan identifiera <marquee> och vissa prefers-reduced-motion-överträdelser, men de kan inte identifiera en JavaScript-driven karusell utan kontroller. Manuell granskning krävs.
Varför det är viktigt
Automatiskt rörligt innehåll är ett av de mest funktionshindrade mönstren på webben. Det drar fokus från alla med uppmärksamhetsrelaterade funktionsnedsättningar (ADHD, vissa ångesttillstånd, postconcussionssyndrom), det tvingar skärmläsaranvändare att ständigt tappa sin plats när DOM-noder uppdateras, och det gör läsning omöjlig för synskadade användare som spårar text långsamt. En pausknapp är ett av de billigaste och mest effektfulla tillgänglighetstilläggen ett marknadsföringsteam kan göra.