Dostępne animacje na stronie zaczynają się od prostego ustalenia: użytkownicy powinni móc zrozumieć stronę i wykonać swoje zadanie bez polegania na dekoracyjnym ruchu. Zachowaj animacje, które wyjaśniają przydatną zmianę, zapewnij spokojniejszą prezentację osobom preferującym ograniczony ruch i w razie potrzeby pozwól użytkownikom kontrolować ruch ciągły.
Dla firmy zamawiającej stronę praktyczne pytanie brzmi: co uwzględnić w briefie i jak ocenić gotową realizację? Ten przewodnik zawiera inwentaryzację animacji, tabelę decyzji i listę kontrolną odbioru. Możesz wykorzystać je przy nowym projekcie lub istniejącej stronie bez samodzielnego rozstrzygania każdego szczegółu wdrożenia.
1. Określ cel każdego ruchomego elementu
Zacznij od spisania wszystkiego, co porusza się podczas typowej ścieżki klienta. Otwórz stronę główną, przeczytaj opis usługi, rozwiń pytanie i przejdź do formularza kontaktowego. Uwzględnij animację początkową, efekty przewijania, automatycznie zmieniające się slajdy, film w tle, przejścia menu, wskaźniki ładowania i komunikaty o powodzeniu. Nie ograniczaj się do najbardziej widocznej sekcji otwierającej: drobne efekty mogą kumulować się na całej stronie.
Przy każdym elemencie opisz, czego użytkownik dowiaduje się dzięki ruchowi. Otwierający się panel może pokazać, gdzie znajdują się dodatkowe informacje. Wskaźnik postępu może wyjaśnić, że zgłoszenie jest nadal przetwarzane. Obracający się obiekt dekoracyjny może wspierać identyfikację wizualną, ale nie powinien być jedynym sposobem na poznanie usługi lub znalezienie następnego przycisku.
Zapisz oczekiwany rezultat, zanim zaczniesz omawiać czas trwania lub styl animacji. „Klient widzi, które pytanie jest rozwinięte” pozostawia projektantowi przestrzeń do wyboru czytelnego rozwiązania. „Każda sekcja musi wlatywać na ekran” narzuca efekt, zanim ktokolwiek sprawdzi, czy jest on pomocny. Poproś zespół o pokazanie wersji statycznej obok animowanej koncepcji.
Przygotuj krótką inwentaryzację animacji
Przydatna inwentaryzacja obejmuje stronę, element, zdarzenie wyzwalające, cel, informację o powtarzaniu ruchu, proponowane zachowanie przy ograniczonym ruchu oraz osobę odpowiedzialną za ocenę. Dodaj kolumnę na dowody: adres podglądu, nagranie lub notatkę z testu. Powstanie zwięzły dokument odbioru, do którego możesz wrócić, gdy nowa kampania wprowadzi kolejną karuzelę lub film.
2. Ustal, jak ma działać spokojniejsza wersja
MDN opisuje prefers-reduced-motion jako sposób wykrywania przez stronę preferencji ograniczenia ruchu, który nie jest niezbędny. To sygnał, na który wdrożenie musi odpowiednio zareagować. Włączenie ustawienia urządzenia nie przeprojektowuje automatycznie wszystkich animacji na stronie.
Poproś o ustalenie zachowania każdego efektu. Duże przybliżenie można zastąpić natychmiastową zmianą stanu, a ruchome tło dekoracyjne statycznym obrazem. Rozwijana odpowiedź może pojawić się bez przemieszczania się przez ekran. Nie przyjmuj „wszystko zwolnimy” jako pełnego planu: wolniejszy ruch na dużym obszarze nadal może być niepotrzebnym elementem korzystania ze strony.
| Element i cel | Spokojniejsza prezentacja do omówienia | Pytanie przy odbiorze |
|---|---|---|
| Dekoracyjny ruch w sekcji otwierającej buduje styl wizualny | Zastosuj przemyślaną kompozycję statyczną | Czy użytkownik może od razu przeczytać ofertę i skorzystać z głównego linku? |
| Sekcje pojawiają się w miarę przewijania strony | Pokaż treść bez dużych przemieszczeń i oczekiwania | Czy każda sekcja jest dostępna podczas szybkiego przewijania i nawigacji klawiaturą? |
| Menu odsłania opcje nawigacji | Otwieraj i zamykaj je w miejscu, z czytelnym wskazaniem stanu | Czy użytkownik może dotrzeć do linków i wrócić do elementu otwierającego menu? |
| Karuzela przedstawia kilka ofert | Zapewnij jednoznaczne elementy sterujące oraz uzgodniony stan statyczny lub wstrzymany | Czy można dotrzeć do wszystkich ofert bez ścigania się z automatycznymi zmianami? |
| Formularz sygnalizuje przetwarzanie i zakończenie | Zachowaj zrozumiały opis stanu i stabilne potwierdzenie | Czy użytkownik wie, czy ma czekać, spróbować ponownie, czy kontynuować? |
Ta tabela to przykład planowania, a nie dowód, że konkretna strona spełnia standard dostępności. Zastąp jej wiersze rzeczywistymi komponentami swojego projektu. Zapisz, co dzieje się przy pierwszym wczytaniu i co powinno się stać po zmianie preferencji, gdy strona pozostaje otwarta. Poproś programistę o wskazanie komponentów zewnętrznych, których zachowanie wymaga osobnego sprawdzenia.
3. Rozróżniaj preferencje, sterowanie i kryteria dostępności
Obsługa ograniczonego ruchu i przycisk pauzy rozwiązują powiązane, lecz różne problemy. Preferencja może zapewnić spokojniejsze korzystanie ze strony od samego początku. Widoczny element sterujący pozwala zatrzymać ciągły ruch podczas czytania. Brief powinien opisywać oba rozwiązania tam, gdzie są potrzebne, zamiast traktować jedno z nich jako uniwersalny zamiennik drugiego.
Kryterium 2.3.3 WCAG 2.2, Animacja po interakcji, ma poziom AAA. Dotyczy możliwości wyłączenia animacji ruchu wyzwalanej interakcją, chyba że animacja jest niezbędna dla funkcjonalności lub informacji. Nie przedstawiaj tego konkretnego kryterium jako wymagania poziomu AA.
Kryterium 2.2.2, Wstrzymywanie, zatrzymywanie, ukrywanie, ma poziom A. Zapis dotyczący ruchomej treści obowiązuje, gdy ruch zaczyna się automatycznie, trwa dłużej niż pięć sekund i jest prezentowany równolegle z inną treścią, z wyjątkiem sytuacji, w których jest niezbędny do działania. Istnieje również osobny zapis dotyczący automatycznie aktualizowanych informacji, bez tego wyjątku związanego z pięcioma sekundami. Te rozróżnienia mają znaczenie przy ocenie karuzeli, przewijanego paska informacji lub animowanego tła.
Zapytaj wykonawcę, według jakich kryteriów i poziomu zgodności będzie oceniany projekt, kto przeprowadzi ocenę i jakie dowody zostaną dostarczone. Zaliczenie listy kontrolnej ograniczonego ruchu nie potwierdza pełnej zgodności z WCAG. Ocena animacji jest częścią szerszego przeglądu, który uwzględnia także strukturę, metody wprowadzania danych, kontrast, alternatywy i inne wymagania.
Sprawdź, czy elementy sterujące rzeczywiście dają kontrolę
Przycisk pauzy powinien być łatwy do znalezienia, zrozumiały i możliwy do użycia za pomocą uzgodnionych metod obsługi. Sprawdź, co dzieje się po przeniesieniu fokusu w inne miejsce lub otwarciu kolejnego komponentu. Karuzela, która wznawia ruch natychmiast po opuszczeniu przycisku pauzy, nie zapewnia przydatnej przerwy na czytanie. Ustal, czy preferencja lub wybór pauzy utrzymuje się podczas przechodzenia między stronami, a następnie przetestuj uzgodnione zachowanie.
4. Zachowaj możliwość wykonania zadania po zmianie ruchu
Spokojniejsza wersja nadal musi działać jako kompletna strona. Usunięcie animacji nie powinno pozostawiać przezroczystego tekstu, nawigacji poza widocznym obszarem ani przycisku oczekującego na zakończenie animacji. Poproś programistę o pokazanie, że treść osiąga użyteczny stan końcowy również wtedy, gdy dekoracyjna sekwencja się nie uruchamia.
Śledź fokus klawiatury w menu, oknach dialogowych i rozwijanych sekcjach. Czy widzisz, gdzie jesteś? Czy otwarcie komponentu przenosi Cię w sensowny kontekst, a jego zamknięcie do oczekiwanego miejsca? Unikaj projektu, w którym ruch jest jedyną wskazówką, że coś się zmieniło. Znaczenie powinny przekazywać również czytelne etykiety, stany zaznaczenia i stabilny układ.
Zwróć szczególną uwagę na formularze. Sama obracająca się figura nie wyjaśnia, czy zgłoszenie jest przetwarzane, zakończyło się błędem, czy zostało przyjęte. Poproś o jasne komunikaty o stanie oraz odpowiednie przekazywanie ważnych aktualizacji technologiom asystującym. Jeśli zespół usunie obracający się wskaźnik w spokojniejszej wersji, informacja o stanie i następnym działaniu musi pozostać dostępna.
W przypadku treści poruszających się wraz z przewijaniem porównaj powolne przewijanie, szybkie przewijanie i nawigację klawiaturą. Sprawdź, czy nagłówki, ceny lub elementy sterujące nie znikają, zanim można je przeczytać. Dostęp do istotnych informacji nie powinien wymagać wykonania gestu w precyzyjnie dobranym momencie. Jeśli wizualna opowieść wymaga sekwencji, ustal dostępny sposób dotarcia do tych samych informacji bez wykonywania tej sekwencji.
Hipotetyczna ocena strony usługi
Wyobraź sobie firmę doradczą z dekoracyjną animacją w sekcji otwierającej i formularzem kontaktowym. W spokojniejszej wersji sekcja otwierająca staje się statycznym obrazem, szczegóły usług pojawiają się natychmiast, a formularz zachowuje komunikat o przetwarzaniu i potwierdzenie. Osoba oceniająca sprawdza w obu wersjach tę samą ścieżkę wysłania zapytania. To ilustracja metody odbioru, a nie opis wyniku osiągniętego przez klienta ani obietnica większej liczby konwersji.
5. Oceń gotowe strony w obu trybach
Poproś o podgląd dokładnie tej wersji, która ma zostać opublikowana. Oceń ją przy zwykłym ustawieniu ruchu, a następnie z włączoną preferencją ograniczonego ruchu w urządzeniu lub przeglądarce. Plik projektowy może pokazać zamysł, ale nie dowodzi, jak reaguje gotowa strona. Przy każdej obserwacji zapisz przeglądarkę, urządzenie, ustawienie i adres strony.
Używaj niewielkiego, powtarzalnego zestawu zadań: przeczytaj ofertę, otwórz nawigację, rozwiń dodatkowe informacje i dotrzyj do formularza kontaktowego. W środowisku testowym uwzględnij uzgodnione stany powodzenia i błędu formularza. Nie wysyłaj prawdziwych zapytań klientów tylko po to, by przetestować animacje. Zespół projektowy powinien zapewnić bezpieczny sposób sprawdzenia tych stanów bez uruchamiania wiadomości operacyjnych.
Sprawdź stronę na telefonie i komputerze oraz korzystaj z klawiatury, a także z dotyku lub urządzenia wskazującego tam, gdzie ma to zastosowanie. Powiększ tekst, by sprawdzić, czy ruchome nakładki nie zasłaniają treści. Jeśli efekt zależy od najechania wskaźnikiem, zapytaj, jak te same informacje są dostępne przy obsłudze dotykowej. Uwzględnij osadzone narzędzia rezerwacyjne, filmy i inne zewnętrzne komponenty należące do ścieżki klienta.
Opisuj błędy za pomocą obserwowalnych przykładów. „Przy włączonym ograniczeniu ruchu otwarcie menu mobilnego pozostawia link kontaktowy niewidoczny” pozwala podjąć konkretne działanie. „Animacja wydaje się nie taka” wymaga dodatkowego wyjaśnienia. Podaj kroki, oczekiwane zachowanie i krótkie nagranie, gdy problem dotyczy ruchu. Po poprawce powtórz odpowiednie zadanie w poprawionej wersji podglądu.
6. Poproś o dowody odpowiadające deklaracjom
Przechowuj inwentaryzację animacji razem z wynikami. Każdy wiersz powinien określać, co przetestowano, co zaliczono, co pozostaje nierozwiązane i kto odpowiada za kolejne działanie. Poproś o wskazanie rzeczywistych stron i stanów objętych oceną zamiast odznaki z napisem „dostępne”. Raport automatyczny pomaga wykryć niektóre problemy, natomiast ręczna ocena zadań ujawnia zachowania wymagające bezpośredniej obserwacji.
Dokumentacja Lighthouse w Chrome wyjaśnia, że ręczne kontrole dostępności nie wpływają na wynik dostępności tego narzędzia. Wynik 100 nie potwierdza więc, że oceniono każde wymaganie dostępności. Poproś o wyniki kontroli ręcznych obok raportu automatycznego, zwłaszcza w odniesieniu do sterowania ruchem i pełnej ścieżki wysłania zapytania.
Wydajność oceniaj osobno. Zapytaj, jakiej wersji, profilu urządzenia i warunków dotyczy wynik laboratoryjny oraz czy sprawdzono ważne interakcje po początkowym wczytaniu strony. Dekoracyjny efekt, który wygląda płynnie na komputerze projektanta, nadal wymaga oceny na uzgodnionych urządzeniach docelowych. Preferencja ograniczonego ruchu nie jest wiarygodnym wskaźnikiem wolniejszego urządzenia, a zwykła prezentacja również wymaga odpowiedniej oceny wydajności.
Zadbaj o precyzyjne deklaracje w dokumentacji przekazania. „Przetestowano tych pięć komponentów z włączonym ograniczeniem ruchu w tych przeglądarkach” to przydatny dowód. „Pełna dostępność, ponieważ animacje są wyłączone” nie jest wnioskiem, który uzasadnia ta lista kontrolna. Jeśli projekt obejmuje szerszą ocenę dostępności, zapisz jej zakres i nierozwiązane kwestie osobno.
7. Uwzględnij ruch w briefie i przekazaniu strony
Przed odbiorem prac uzgodnij te decyzje na piśmie. Pozwalają zweryfikować preferencje wizualne i pomagają przyszłym redaktorom uniknąć ponownego wprowadzenia nierozwiązanego problemu.
- Cel: każdy ruchomy komponent ma określoną rolę i osobę odpowiedzialną za treść.
- Alternatywa: zachowanie przy ograniczonym ruchu jest zdefiniowane, wdrożone i sprawdzone na rzeczywistych stronach.
- Kontrola: ruch ciągły i automatyczne aktualizacje mają uzgodnione elementy sterujące oraz sposób działania.
- Ciągłość: treść, fokus klawiatury, komunikaty o stanie i główne zadanie klienta pozostają użyteczne.
- Dowody: notatki z oceny wskazują wersję, środowiska, wyniki i nierozwiązane kwestie.
- Utrzymanie: ktoś wie, jak oceniać nowe filmy, osadzone treści i komponenty kampanii po publikacji.
Do zapytania o projekt dołącz inwentaryzację, strony referencyjne i priorytetową ścieżkę klienta. Nasz przewodnik po briefie projektu strony internetowej pomaga uporządkować szerszy zakres prac, a lista kontrolna przebudowy strony ułatwia ustalenie, co zachować i ponownie przetestować w istniejącym serwisie.
Cena aktualnego pakietu stron internetowych Digital Studio zaczyna się od 2 190 EUR. Pakiet obejmuje do pięciu responsywnych stron, podstawy SEO, formularz pozyskiwania kontaktów oraz publikację w Twojej domenie. Sprawdź aktualne usługi i zakres prac, a wymagania dotyczące ruchu i dostępności opisz w briefie strony. Wszelkie specjalistyczne oceny i dodatkowe prace uzgodnij wprost; nie zakładaj, że cena pakietu oznacza obietnicę konkretnego certyfikatu dostępności.
