Toczące się linki, które czytniki ekranu wciąż czytają

Efekt

Najedź na link na tej stronie, a litery potoczą się jak w liczniku: każda przekręca się przez kilka losowych znaków i wraca na siebie, jedna po drugiej, od lewej do prawej.

Jak to działa

Krótki skrypt znajduje elementy oznaczone do toczenia i zamienia każdą literę w małą rolkę: litera, cztery losowe znaki i znów ta sama litera. CSS przesuwa rolkę w górę po najechaniu, a każda rolka czeka kilka milisekund dłużej niż poprzednia, co daje falę.

Haczyk z dostępnością

Rozbicie słowa na rolki psuje je dla technologii wspomagających: czytnik ekranu przeczytałby ciąg pojedynczych, czasem losowych liter. Naprawiają to dwie rzeczy:

• Link dostaje aria-label z oryginalnym tekstem, zapisany przed rozbiciem liter.
• Same rolki mają aria-hidden, więc czytana jest tylko etykieta.

Kiedy odpuścić

Z włączonym ograniczeniem ruchu skrypt nic nie robi i linki zostają zwykłym tekstem. Efekt jest ozdobą, więc odpada jako pierwszy.