Wstrzymywanie, zatrzymywanie i ukrywanie automatycznie przesuwanej treści
Zapewnij użytkownikom kontrolę nad karuzelami i filmami.
Wstrzymywanie, zatrzymywanie i ukrywanie automatycznie przesuwanej treści to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Daj użytkownikom kontrolę
Jeśli treść porusza się samoczynnie, użytkownik potrzebuje sposobu na przerwanie tego ruchu. WCAG określa to jako wstrzymanie, zatrzymanie lub ukrycie automatycznie poruszającej się treści. ⏸️
Co uznaje się za ruch automatyczny
Chodzi między innymi o karuzele, automatycznie zmieniające się pokazy slajdów, przewijane paski informacyjne i zapętlone filmy w tle. Każda animacja uruchamiana bez działania użytkownika spełnia ten warunek.
Zasada pięciu sekund
Kryterium dotyczy ruchu trwającego dłużej niż pięć sekund i wyświetlanego równocześnie z inną treścią. Krótka animacja wprowadzająca jest wyłączona z tej zasady.
Dlaczego to ma znaczenie
Poruszająca się treść odciąga uwagę i może być niemożliwa do odczytania dla użytkowników z wrażliwością poznawczą lub wrażliwością na ruch. Kontrola pozwala odzyskać kontrolę nad stroną.
Zaproponuj przycisk wstrzymania
Najprostszym rozwiązaniem jest prawdziwy przycisk wstrzymania. Użytkownik powinien móc zatrzymać karuzelę, aby spokojnie dokończyć czytanie slajdu.
<button aria-label="Pause slideshow">Pause</button>Zatrzymanie jest silniejsze niż wstrzymanie
Wstrzymanie można wznowić, natomiast zatrzymanie kończy ruch na dobre. Każda z tych opcji spełnia zasadę, o ile użytkownik rzeczywiście sprawuje kontrolę.
Ukrycie również jest opcją
Czasami najlepszym rozwiązaniem jest umożliwienie użytkownikom całkowitego ukrycia poruszającego się elementu. Przycisk zamknięcia paska informacyjnego usuwa rozpraszacz wprost.
Wstrzymuj po najechaniu i przeniesieniu fokusu
Karuzela powinna również wstrzymywać się, gdy użytkownik najeżdża na nią kursorem lub przechodzi do niej za pomocą tabulatora, aby czytanie i interakcja nie kolidowały z automatyczną zmianą slajdu.
Zapewnij dostęp do kontroli
Sam przycisk wstrzymania musi być dostępny z poziomu klawiatury i mieć jasną etykietę. Kontrola, której nikt nie może znaleźć, nie spełnia swojej funkcji.
Połącz to z ograniczeniem ruchu
Najlepiej nie uruchamiać automatycznego odtwarzania dla użytkowników, którzy ograniczają ruch. Należy połączyć sprawdzanie preferencji z widocznym przyciskiem wstrzymania.
@media (prefers-reduced-motion: reduce) {
.carousel { animation-play-state: paused; }
}Pomiń automatyczną zmianę
Szczerze mówiąc, wiele karuzel działa lepiej bez automatycznej zmiany. Użytkownicy mogą przechodzić między elementami we własnym tempie, a problem znika.
Szybkie sprawdzenie
Czego wymaga zasada wstrzymania, zatrzymania lub ukrycia?
Podsumowanie
Automatycznie poruszająca się treść musi oferować kontrolowane przez użytkownika wstrzymanie, zatrzymanie lub ukrycie. Kontrola powinna być dostępna z klawiatury, a przy ograniczeniu ruchu należy pominąć automatyczne odtwarzanie. ✅
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Wstrzymywanie, zatrzymywanie i ukrywanie automatycznie przesuwanej treści” jest bezpłatna?
Tak — pełny tekst „Wstrzymywanie, zatrzymywanie i ukrywanie automatycznie przesuwanej treści” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Wstrzymywanie, zatrzymywanie i ukrywanie automatycznie przesuwanej treści”?
Zapewnij użytkownikom kontrolę nad karuzelami i filmami. Ćwiczysz Web Accessibility Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Wstrzymywanie, zatrzymywanie i ukrywanie automatycznie przesuwanej treści”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- prefers-reduced-motion w CSS i JS
- Zaburzenia przedsionkowe i zagrożenia związane z paralaksą
- Próg trzech błysków a napady padaczkowe
- Wstrzymywanie, zatrzymywanie i ukrywanie automatycznie przesuwanej treści