Resurssit · 66
Animaatio: tarkista vähennetty liike, tauko ja ymmärrys
Varaston liike, tarjoa vähennettyä käyttäytymistä ja testaa, että edistyminen, tila ja navigointi pysyvät ymmärrettävissä ilman animaatiota.
Päivitetty · 2 min
Mitä tämä opas auttaa saavuttamaan
- Inventaarion laukaisevat tekijät
- Määrittele rajoitettu käyttäytyminen
- Erilliset WCAG-kriteerit
- Testaa kaikki toteutukset
Pikatarkistus
- Estääkö vähennetty liike kaiken animaation?
- Onko kriteeri 2.3.3 tasoa AA?
- Riittääkö globaali CSS-sääntö?
Vaiheittainen menetelmä
- 1
Inventaarion laukaisevat tekijät
Listaa automaattinen, vuorovaikutuksen laukaisema ja vieritykseen linkitetty liike. Erota tilatiedot koristelusta. Tarkasta myös JavaScript-animaatioita, videoita ja upotettuja elementtejä.
Toimitettava: tehosteet ja tarkoitusrekisteri.
- 2
Määrittele rajoitettu käyttäytyminen
prefers-reduced-motion viestii halusta vähentää ei-välttämätöntä liikettä. Tarjoa staattinen tai hiljaisempi vaihtoehto säilyttäen samalla tiedot ja kontrollit. Vältä suurten käännösten korvaamista toisella häiritsevällä tehosteella.
Toimitettava: vähennetty käyttäytymistä komponenttikohtaisesti.
- 3
Erilliset WCAG-kriteerit
Vuorovaikutusanimaatiokriteeri 2.3.3 on tasoa AAA. Tason A kriteeri 2.2.2 kattaa muun muassa tietyt yli viisi sekuntia kestävät automaattiset liikkeet muun sisällön rinnalla, elleivät ne ole välttämättömiä. Tarkista sovellettavan kriteerin ehdot.
Toimitettava: kriteerit ja kontrollit kullekin tehosteelle.
- 4
Testaa kaikki toteutukset
Jäljittele mieltymystä ennen lataamista ja istunnon aikana. Tarkasta tyylit, skriptit ja ohjelmallinen vieritys. Jos tila riippuu animaation valmistumisesta, varmista luotettava lopputulos myös animaation poistamisen jälkeen.
Tuotanto: kylmälataus-, reaaliaikaiset muutos- ja lopputilan kokeet.
- 5
Säilytä tiedot ja säätimet.
Harjoittele lukemista, näppäimistöä ja virhepalautetta molemmissa tiloissa. Testaa automaattisen liikkeen, tauon, pysäytyksen tai piilotuksen sekä vakauden osalta lukemisen aikana. Dokumentoi poikkeukset sen sijaan, että merkitsisit jokaisen animaation.
Tuotanto: todisteet ja rajoitukset.
Uudelleenkäytettävä laskentataulukko
Täytä valtuutetut havaintosi. Nämä kentät ovat työskentelymalli, eivät havaittuja tuloksia.
| Kenttä | Kirjattavat tiedot |
|---|---|
| Vaikutus | Liipaisin, kesto ja tiedot |
| Vaihtoehto | Supistettu versio ja lopullinen tila |
| Kriteeri | Taso, ehdot ja hallinta |
| Kokeilu | Mieltymys, näppäimistö, tulos ja raja |
Kuvitteellinen esimerkki
Havainnollistava tilanne
Kuvitteellinen esimerkki: paneeli aktivoituu vasta sen jälkeen, kun sen siirtymä on valmis.
Päätös ja odotettu näyttö
Supistetun tilan hyväksyntä paljastaa odotuksen; komponentti suorittaa tilamuutoksensa loppuun riippumatta animaation kestosta.
Mekanismien erottaminen
| Mekanismi | Tarkoitus | Vahvistus tai rajoitus |
|---|---|---|
| Liikkeenrajoituksen mieltymys | Sopeutuminen järjestelmän valintoihin | Myös skriptien tarkistaminen |
| Keskeytä ohjaus | Ohjaus vaikuttaa automaattiseen liikkeeseen | Tee siitä näppäimistökäyttöinen |
| Staattinen tila | Säilytä tiedot ilman liikettä | Älä poista edistymistä tai virheilmoituksia |
Johdon indikaattorit
| Indikaattori | Mitä se mittaa | Ensimmäinen toimenpide |
|---|---|---|
| Mukautetut tehosteet | Liike vahvistetuilla vaihtoehdoilla | Sisällytä upotukset ja vieritys |
| Säilytetyt tehtävät | Liikkeet suoritettu rajoitetussa tilassa | Tarkista animaatiosta riippuvat tilat |
| Toimivat ohjaimet | Keskeytys tai pysäytys ovat todella tehokkaita | Tarkista jatkaminen ja näppäimistö |
Yleisiä virheitä
- Myös skriptien tarkistaminen
- Tee siitä näppäimistökäyttöinen
- Älä poista edistymistä tai virheilmoituksia
Usein kysytyt kysymykset
Estääkö vähennetty liike kaiken animaation?
Ei. Se ilmaisee mieltymyksen; valitse suhteellinen mukautus ja säilytä tarvittavat tiedot.
Onko kriteeri 2.3.3 tasoa AA?
Ei, se on AAA. Automaattiseen liikkeeseen tai vilkkumiseen voi soveltua muita kriteerejä.
Riittääkö globaali CSS-sääntö?
Se voi vähentää monia tehosteita, mutta ei välttämättä ohjaa skriptejä, videoita tai integraatioita. Testaa todellisia komponentteja.
Viralliset viitteet
Viitteet tukevat menetelmää. Sovita tarkastukset kontekstiisi; ne eivät ole sertifiointia. Alkuperäiset viitteiden otsikot ja lähdeasiakirjat voivat olla toisella kielellä.
Lähteet tarkistettu .
