Rolling link hovers that screen readers still read

The effect

Hover a link on this site and its letters roll like an odometer, each one spinning through a few random characters before landing back on itself, one after another from left to right.

How it is built

A short script finds every element marked for rolling and replaces each letter with a small reel: the letter, four random characters, and the letter again. CSS slides the reel up on hover, and each reel waits a few milliseconds longer than the one before it, which gives the wave.

The accessibility catch

Splitting a word into reels breaks it for assistive technology: a screen reader would read out a string of single, sometimes random, letters. Two things fix that:

• The link gets an aria-label with its original text, written before the letters are split.
• The reels themselves are marked aria-hidden, so only the label is read.

Knowing when not to

With reduced motion switched on, the script does nothing and the links stay plain text. The effect is decoration, so it is the first thing to go.