WebsightWho it affects
Someone with dyslexia reading the station's service updates reads the start of Delays on the 08:14 to, and the rest has gone. They wait for it to come round again. Three times.
Someone using screen magnification at 400% sees a few letters at a time sliding past, and cannot read any of it.
Someone using a screen reader may hear the text once, or hear it repeated endlessly, depending on the screen reader.
Broken versus fixed
The broken markup is shown as code rather than rendered, because the effect is in how it is announced or handled, not how it looks.
<marquee>Delays on the 08:14 to Reading. Platform 2 closed for repairs.</marquee>The sentence scrolls right to left at a fixed speed and loops. Nothing can stop it.
<ul class="updates">
<li>Delays on the 08:14 to Reading.</li>
<li>Platform 2 closed for repairs.</li>
</ul>Two still lines that can be read at any speed, zoomed, and found with Ctrl+F.
Test it by hand in two minutes
- View the page source and search for <marquee.
- Look for text that moves on its own. Try to stop it with a click or the Escape key; if you cannot, it fails.
- Zoom the browser to 400% and watch any moving text. If you cannot read it, that is what magnifier users see all the time.
- Check JavaScript tickers too: news headlines, share prices, now playing bars.
The fix
<marquee>Delays on the 08:14 to Reading. Platform 2 closed for repairs.</marquee><ul class="updates">
<li>Delays on the 08:14 to Reading.</li>
<li>Platform 2 closed for repairs.</li>
</ul>If space is tight, show one update at a time with next and previous buttons rather than scrolling. Give it a pause control and stop it after a few loops.
CSS ticker
.ticker { animation: slide 12s linear infinite; white-space: nowrap; }.ticker { animation: none; white-space: normal; }Same problem, same fix. If you keep it, add a pause button and respect prefers-reduced-motion.
Common mistakes
- Rebuilding the marquee with a CSS animation, which the scanner cannot see and people cannot stop.
- Pausing on hover only; keyboard and touch users cannot hover.
- Speeding the text up to fit more in.
- Using a marquee for the only copy of important information, such as a closure notice.
WCAG criteria this rule maps to
axe-core tags this rule as WCAG 2.2 level A. It is one of the checks for:
- 2.2.2 Pause, Stop, Hide (level A). Official W3C text.
The scanner finds marquee elements in the document. Tickers built with CSS or JavaScript are not detected, so look at the page yourself for anything that moves. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.
Related rules
blink
The blink element makes text flash on and off and gives nobody a way to stop it.
A
Pages must not refresh or redirect on a timer
meta-refresh
A meta refresh with a delay reloads the page, or sends the visitor somewhere else, after a set number of seconds.
A
Sound must not start playing on its own
no-autoplay-audio
If a page starts playing sound by itself and keeps going for more than three seconds, it needs a way to stop or mute it before anything else on the page.
A
Scrollable areas must be reachable with a keyboard
scrollable-region-focusable
When a box has its own scrollbar, mouse users scroll it with the wheel.