Csökkentett mozgás a webshopban: ezt ellenőrizd az animációk mellett

Egy animált webshop átadásakor kérd meg a fejlesztőt, hogy csökkentett mozgással is mutassa meg az oldalt. Nyissatok meg egy terméket, válasszatok változatot, majd tegyétek a kosárba. A látogatónak ebben a beállításban is látnia kell, mit választott és sikerült-e a művelet. Ezzel a rövid próbával jóval többet megtudsz a működésről, mint egy kipipált funkciólistából.

Az animációkat ehhez érdemes külön is sorra venni. Más kezelést igényel az automatikusan elinduló háttéreffekt, a görgetésre elmozduló felület és a gombnyomást követő visszajelzés. Minden típusnál beszéljétek meg, hogyan működjön csökkentett mozgás mellett. A cél az, hogy a látogató a saját beállításával is megkapja a szükséges információt, és el tudja végezni a vásárlást.

Írd össze, pontosan mi mozog és mitől indul el

Első lépésként készíts rövid listát a mozgó elemekről. Szerepeljen rajta a szezonális figura, a fejlécben váltakozó tartalom, a termékképek átmenete, a kosárba helyezés jelzése és minden görgetéshez kötött elmozdulás. Az eredetet is jelöld: saját sablon, külső alkalmazás vagy külön kampánykód. Így tudni fogod, melyik javítást a sablon fejlesztőjétől, és melyiket egy alkalmazás készítőjétől kell kérned.

Minden elemnél kérdezd meg, milyen információ maradna el, ha azonnal a végső állapot jelenne meg. Egy termék sikeres kosárba helyezését rövid szöveg is jelezheti. A szezonális hóesés elhagyása mellett az ajánlat változatlanul olvasható maradhat. Előbb nevezzétek meg, mit kell a vevőnek megtudnia, majd válasszatok ehhez mozgás nélküli jelzést. A sikeres kosárba helyezésről akkor is kapjon visszaigazolást, ha a repülő termékképet kikapcsoljátok.

A lista a felhasználó műveletét is nevezze meg. A „termékoldal animációja” túl tág megfogalmazás. A „képnagyítás megnyitásakor a fotó a képernyő közepére közelít” már vizsgálható állítás. Ehhez hozzáírható, mi legyen csökkentett mozgás esetén: például közvetlen megjelenés azonos kezelőszervekkel és változatlan bezárási lehetőséggel.

A készülék beállításához igazítsd az oldal működését

A W3C Media Queries Level 5 dokumentuma leírja a prefers-reduced-motion jelzést, amellyel a weboldal felismerheti, hogy a látogató kevesebb, a működéshez szükségtelen mozgást kér. A fejlesztő feladata, hogy az oldal reagáljon erre a jelzésre. A készüléken bekapcsolt lehetőség csak akkor változtatja meg az animációt, ha ezt a weboldal is megfelelően kezeli.

A fejlesztési feladatban ezért nevezd meg, mely elemek álljanak le, melyek jelenjenek meg statikusan, és mely visszajelzések kapjanak szöveges formát. Egy általános animációtiltás után is végig kell próbálni a felületet. Maradhat például láthatatlan egy panel, ha a megjelenését eredetileg egy átmenet fejezte be. A módosítás után a vásárlás minden szükséges eleme jelenjen meg, és legyen kezelhető.

A DG Dekoráció figyelembe veszi a csökkentett mozgás beállítását. A teljes webshop ellenőrzésénél a többi beépülő elemet is nézd meg. A termékgalériát, a sablon saját effektjeit és a többi alkalmazást is külön próbáld ki. Egy megfelelően leálló szezonális effekt mellett a termékgalériában még maradhat forgó vagy közelítő átmenet.

Más ellenőrzés kell az automatikus és a kattintásra induló mozgáshoz

A W3C Pause, Stop, Hide magyarázata az automatikusan induló, öt másodpercnél tovább tartó, más tartalom mellett megjelenő mozgásnál szüneteltetési, megállítási vagy elrejtési lehetőséget ír le. Kivételt jelent a tevékenységhez nélkülözhetetlen mozgás. Az ellenőrzési listában ezért szerepeljen, mitől indul az effekt, meddig tart, és hogyan állítható le.

Az interakcióra induló animáció külön W3C-kritériuma AAA szinten a szükségtelen mozgás kikapcsolhatóságát tárgyalja. Ide tartozhat a görgetéshez vagy kattintáshoz hozzáadott elmozdulás. A két forrás eltérő helyzetet tárgyal. Külön próbáld ki például a magától elinduló háttérjelenetet és a termékre kattintáskor megjelenő átmenetet.

Megrendelőként azt fogalmazd meg világosan, milyen működést vársz. Egy hosszabb háttérjelenetnél legyen világos, hogyan állítható le. Egy termékválasztásnál a kiválasztott állapot mozgás nélkül is látszódjon. Ha a felület saját kapcsolót kínál, annak felirata és tényleges hatása egyezzen. A „mozgás kikapcsolása” után ne maradjon észrevétlenül ugyanaz az effekt egy másik oldalon.

Négyféleképpen próbáld ki ugyanazt a vásárlási lépést

Az első próbát az alapértelmezett készülékbeállítással végezd. Nyisd meg a terméket, válassz változatot, tedd a kosárba, és nézd meg a visszajelzést. A második próbánál már a belépés előtt legyen bekapcsolva a csökkentett mozgás. A harmadikban nyitott oldal mellett változtasd meg a készülék beállítását. A negyedikben töltsd újra az oldalt a megváltozott beállítással.

Ebből kiderül, hogy az oldal azonnal reagál-e a beállítás megváltoztatására, vagy újratöltésre vár. Írd le, melyik működést kértétek a fejlesztőtől, és mi történt a próba során. Ha egy alkalmazás csak újratöltéskor alkalmazza a beállítást, az eltérést a saját követelményeidhez képest értékeld. A próba eredményét ne általánosítsd más, ki nem próbált böngészőkre.

Egér nélkül is menj végig a lényeges kezelőszerveken. Billentyűzettel haladva mindig lásd, melyik kezelőelemnél jársz. A megnyitott panelt tudd használni és bezárni, utána pedig logikus helyen folytathasd a navigációt. Ezek a próbák a mozgás mellett a kezelhetőség hibáira is felhívhatják a figyelmet. A teljes akadálymentességi vizsgálat további szempontokra is kiterjed, ezért a feljegyzésben pontosan sorold fel, mit ellenőriztél.

Egy termékválasztás mozgás nélküli változata

Vegyünk egy elképzelt lakástextilboltot, amely színválasztáskor forgó átmenettel cseréli a nagy termékképet. Kosárba helyezéskor a termék kicsinyített képe a kosárikonhoz repül. A csapat a csökkentett mozgású változatban közvetlen képcserét tervez, a kosár frissülését pedig rövid szöveg és az aktuális darabszám jelzi. Mindkét változatban a kiválasztott színű termék kerül a kosárba, és erről a vevő egyértelmű visszajelzést kap.

A próbán kiderülhet például, hogy a közvetlen képcserével eltűnik az eredeti töltési visszajelzés. Erre külön javítást kell tervezni: a kép beérkezéséig is legyen érthető az oldal állapota. A lassabban betöltődő kép mellett is látszódjon, hogy a rendszer megkapta a színválasztást. Ha csak a forgó átmenetet kapcsoljátok ki, ez a visszajelzés könnyen kimaradhat. Ezért kell a mozgás nélküli változatot is a teljes feladatsorral ellenőrizni.

A javítás után ugyanazzal a színválasztási és kosárba helyezési feladattal ismételjétek meg a próbát. Kérd meg az ellenőrzőt, hogy mondja el, melyik változatot választotta és sikerült-e a hozzáadás. Ha ezt a képernyő alapján meg tudja mondani, a visszajelzés elvégezte a feladatát. Ha bizonytalan, kérdezz rá, melyik lépésnél maradt kérdése.

Olyan hibaleírást adj, amelyből javítás készülhet

A fennmaradó hibát pontos helyzettel add át: oldal címe, készülék, böngésző, mozgásbeállítás, elvégzett művelet és észlelt eredmény. Mellé kerüljön az elvárt állapot. A „zavaró animáció” megjegyzésből nehéz javítási feladatot készíteni. A „csökkentett mozgás mellett a termékcsere továbbra is forgó átmenetet használ” már ellenőrizhető.

A lezáráskor azt írd le, melyik feladatsor ment végig, és milyen korlát maradt. Egy kipipált mozgásbeállítás nem tanúsítja az egész webshop akadálymentességét. A következő kampány vagy sablonfrissítés után az érintett próbákat ismételd meg. A korábbi feljegyzés alapján a fejlesztő és az üzemeltető is ugyanazt a működést tudja ellenőrizni, és észreveszi, ha egy frissítés visszahozott egy régi hibát.