Liikkeen vähentäminen

Liikkeen vähentäminen on käyttäjäasetus, jonka jokainen nykyaikainen käyttöjärjestelmä tarjoaa. Se kertoo kehittäjille, ettei käyttäjä halua animoitua, parallaksiefektejä tai muuten liikkeellä ladattua sisältöä. Kehittäjät havaitsevat asetuksen CSS-mediakyselyllä @media (prefers-reduced-motion: reduce).

Ketkä tarvitsevat liikkeen vähentämistä

Useita vammaisryhmiä haittaa verkkoliike:

• Vestibulaarisairaudet — huimaus, Ménièren tauti ja vastaavat tilat voivat laukaista tai pahentaa parallaksivieritys, suuret sivulatauksen siirtymät, koko näytön automaattinen videotoisto ja tietyt kameraselausanimaatiot. Vakavat kohtaukset voivat olla lamauttavia.
• Migreeniä sairastavat — moniin migreenimuotoihin liittyy aura; liike on dokumentoitu laukaiseva tekijä.
• Valoherkkyysepilepsiatapaukset — WCAG-kynnyksen ylittävä välkkyvä sisältö (yli kolme välkähdystä sekunnissa) voi laukaista kohtauksen. Liikkeen vähentämisen asetus viestii, että käyttäjä haluaa kaiken liikkeen minimoitavan myös kynnyksen alapuolella.
• Keskittymisvaikeudet — ADHD ja vastaavat tilat tekevät ympäröivästä liikkeestä (vierittyvät bannerit, loputtomat karusellit) merkittävän kognitiivisen rasitteen.

Tämä on laaja käyttäjäjoukko. Eri tutkimukset arvioivat vestibulaaristen häiriöiden, migreenin ja ADHD:n yhteisprevalenssin ylittävän 20 % aikuisista jossain elämänvaiheessa.

Mitä käyttöjärjestelmä tekee

Kaikki tärkeimmät käyttöjärjestelmät tarjoavat liikkeen vähentämisen -asetuksen saavutettavuusasetuksissaan:

• macOS / iOS — Järjestelmäasetukset → Saavutettavuus → Näyttö → Vähennä liikettä.
• Windows 10/11 — Asetukset → Saavutettavuus → Visuaaliset tehosteet → Animaatiotehosteet-kytkin.
• Android — Asetukset → Saavutettavuus → Poista animaatiot.

Selain lukee käyttöjärjestelmän asetuksen ja välittää sen CSS:lle:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

WCAG-kriteerit

Kaksi WCAG-kriteeriä kattaa liikkeen erityisesti:

• 2.3.3 Vuorovaikutuksesta syntyvä animaatio (AAA, WCAG 2.1+) — käyttäjän vuorovaikutuksesta syntyvä liike voidaan poistaa käytöstä, ellei liike ole toiminnallisuuden kannalta välttämätöntä. “Välttämätön”- poikkeus on suppea: CAPTCHA-ajastin on välttämätön; vierityksestä laukaistu korttien kääntöanimaatio ei ole.
• 2.2.2 Tauko, pysäytys, piilotus (A) — kaiken liikkuvan, vilkkuvan tai automaattisesti päivittyvän sisällön, joka kestää yli 5 sekuntia, täytyy olla pysäytettävissä, tauotettavissa tai piilotettavissa. Tämä pätee käyttäjäasetuksesta riippumatta.

Käytännön toimenpiteet

Kohtuullinen perusviiva:

1. Havaitse asetus. Käytä CSS-mediakyselyä jokaisessa tyylitiedostossa, joka lisää animaatioita.
2. Vähennä, älä poista kokonaan. “Vähennetty” ei tarvitse tarkoittaa “nolla”; 100 ms häipyminen on yleensä hyväksyttävä, kun 600 ms liukuanimaatio ei ole.
3. Auditoi ongelmakohdat. Héro-parallaksi, hiiren seurantaefektit, sivulatauksen animaatiot, loputtomat vieritykset, automaattiset videot — nämä ovat ne raskaat tekijät, jotka tarvitsevat liikkeen vähentämisen varasuunnitelman.
4. Oleta oletusnaan liikkeen minimointi. Monet suunnittelujärjestelmät alkavat kääntää oletusarvon: animaatio toimitetaan vain, kun se on eksplisiittisesti otettu käyttöön komponenttikohtaisesti.