Tauko, pysäytys, piilotus
Liikkuva, vilkkuva, vierittyvä tai automaattisesti päivittyvä sisältö, joka kestää yli viisi sekuntia, on voitava keskeyttää, pysäyttää tai piilottaa. Koskee karuselleja, juoksevia tekstejä, uutistickereita, animoituja mainoksia ja automaattisesti päivittyviä syötteitä.
Mitä vaaditaan
Jokaiselle sisällölle, joka täyttää kaikki kolme ehtoa — (a) liikkuu, vilkkuu, vierittyy tai päivittyy automaattisesti, (b) käynnistyy automaattisesti, (c) kestää yli viisi sekuntia ja näytetään samanaikaisesti muun sisällön kanssa — on tarjottava mekanismi sen keskeyttämiseen, pysäyttämiseen tai piilottamiseen. Sama koskee automaattisesti päivittyvää sisältöä, joka ei ole liikettä (live-uutissyötteet, tuloslauta, chat).
Poikkeukset: liike on toiminnan kannalta välttämätön (katsottava video, animaatio-opas) tai sisältö on ainoa näytöllä oleva asia (latausspinni ennen sisällön ilmestymistä).
Miten vaatimus täytetään
- Lisätään näkyvä Tauko/Toista-painike jokaiseen karuselliin, diaesitykseen tai automaattisesti etenevään banneriin. Painikkeen on oltava karuselliwidgetin ensimmäinen kohdistettava elementti.
- Karusellit pysäytetään automaattisesti hiiren viennin ja näppäimistökohdistuksen aikana — mutta käyttäjällä on silti oltava mahdollisuus pysäyttää ne kokonaan.
- Juokseville teksteille, juokseville uutisotsikoille ja osakekurssipalkille lisätään taukopainike samalle riville, vähintään 24×24 CSS-pikselin koossa.
- Automaattisesti päivittyville hallintapaneeleille (Kibana, Grafana, live-urheilu) tarjotaan päivitysvälin valitsin, joka sisältää vaihtoehdon “Vain manuaalinen päivitys”.
- Loputtomasti toistuvat animoidut GIF-kuvat korvataan
<video>-elementillä, jossa on natiiviohjauspainikkeet, tai “toisto napsautuksella” -mallilla.
Yleisimmät puutteet
- Herokarusellit, jotka vaihtuvat kolmen–viiden sekunnin välein ilman taukopainiketta — edelleen yksittäinen yleisin 2.2.2-virhe auditoinneissa.
- Automaattisesti toistuvat videotaustat ilman ohjaimia, erityisesti markkinointisivuilla.
- Uutissivustojen vierittyvät tekstit, jotka liikkuvat vaakasuunnassa ilman taukopainiketta.
- Animoidut SVG-kuvitukset laskeutumissivuilla, jotka toistuvat loputtomasti ilman pysäytysmahdollisuutta.
- Ilmoitustoastit, jotka pinoutuvat jatkuvasti live-syötteestä ilman mykistysmahdollisuutta.
axe ja Lighthouse havaitsevat <marquee>-elementin ja joitakin prefers-reduced-motion-rikkomuksia, mutta ne eivät tunnista JavaScript-pohjaista karusellia ilman ohjaimia. Manuaalinen tarkistus on välttämätöntä.
Miksi tällä on merkitystä
Automaattisesti liikkuva sisältö on yksi verkon haitallisimmista malleista. Se vie huomion pois kaikilta, joilla on tarkkaavaisuuteen liittyvä toimintarajoite (ADHD, tietyt ahdistushäiriöt, aivotärähdyksen jälkitila). Se pakottaa ruudunlukuohjelman käyttäjät menettämään paikkansa jatkuvasti, kun DOM-solmut päivittyvät. Se tekee lukemisen mahdottomaksi heikkonäköisille käyttäjille, jotka seuraavat tekstiä hitaasti. Taukopainike on yksi edullisimmista ja vaikuttavimmista saavutettavuuslisäyksistä, jonka markkinointitiimi voi tehdä.