Moving Ads and Flashing Banners

Things that will not keep still

Open a typical small business home page and something is usually moving: a slider changing every four seconds, an animated ad in the sidebar, a badge that blinks the word sale.

Each was added to catch the eye, and each does. The trouble is that it keeps catching it while the visitor is trying to read something else.

For most people that is an irritation. For some it makes the page unusable, and for a few, flashing content is a medical risk.

The guidelines most accessibility rules refer to, the Web Content Accessibility Guidelines or WCAG, set two limits that cover all of this.

What moves on a typical page

• Sliders and carousels that advance by themselves.
• Animated ads, supplied by advertisers or an ad network.
• Scrolling tickers of news, offers or testimonials.
• Animated images that loop until the visitor leaves.
• Blinking badges on sale prices and new products.
• Background video playing behind the headline.

The second is the one owners feel least able to control, since somebody else made the ad. It sits on your page all the same, and visitors hold you responsible for it.

Flashing is different

Movement distracts. Flashing, where an area of the screen switches sharply between light and dark several times a second, can trigger seizures in people with photosensitive epilepsy.

Large flashing areas and saturated red are the most dangerous, and a seizure can happen to somebody who never knew they were susceptible.

That is why the guidelines treat flashing as a hazard rather than an annoyance.

The three flashes rule

WCAG 2.0 says a page should contain nothing that flashes more than three times in any one second, unless the flashing is small or faint enough to fall below a defined threshold.

The thresholds are technical, and few people can judge them by eye. The practical version is simpler: nothing on the page flashes at all.

The guidelines single this rule out as applying to everything on a page, not only the parts a visitor needs, because flashing can affect somebody reading another part of the screen.

Pause, stop, hide

The second limit covers movement. Anything that starts moving by itself, lasts more than five seconds and sits alongside other content must offer a way to pause, stop or hide it.

Content that updates by itself, such as a ticker or a live feed, needs a way to pause it or control how often it changes.

Movement that lasts under five seconds, or starts only when the visitor presses play, falls outside the rule.

A video looping behind the headline is covered too, and needs its own pause control.

This is the other requirement the guidelines apply to everything on the page, including parts the visitor does not need, such as ads.

Who movement affects

People with attention difficulties find it hard to read anything while something moves at the edge of their vision.

People who read slowly, or in a second language, lose their place when a slide changes before they have finished it.

People using screen magnifiers may see only part of a carousel as it slides past, and some screen readers announce content again each time it changes.

And some people feel dizzy or unwell when large areas of a screen move.

A worked example

A dining and events guide for a mountain resort town sells banner space to local businesses, and its home page opens with a slider of five featured restaurants.

Several advertisers supplied animated banners. One, for a nightclub, alternated a black and a bright red background several times a second.

The guide wrote a short specification for advertisers: animation stops within five seconds, nothing flashes, and a still version is supplied with every banner.

The nightclub's designer remade the banner to the new rules. The slider stopped advancing on its own and gained previous, next and pause controls.

The guide's pages became easier to read, and the advertisers' banners still did their job of being noticed.

Ads you did not make

An ad on your page is part of your page, whoever designed it.

For ads sold directly, write the limits into the agreement: how long animation may run, no flashing, and a still version for anything that breaks the rules.

Ad networks set their own limits on animation, and an ad that ignores them can be reported to the network.

On phones, flashing animated ads are also one of the formats the Better Ads Standards reject. Chrome has been filtering ads on sites that repeatedly fail those standards since February.

Sliders and carousels

The simplest fix is not to advance the slides automatically. Let visitors move through them with clearly labelled buttons.

If the slider must advance by itself, give it a visible pause button, and stop it whenever the pointer rests on it or keyboard focus moves into it.

Pausing when the mouse hovers is not enough on its own, because keyboard and touch users never hover.

A slide that appears only after twelve seconds is seen only by whoever waits twelve seconds. Whatever matters most belongs on the page itself.

Animated images and badges

An animated image can be saved to play once, or a few times, and then stop on its final frame. Few are, because looping forever is a common default.

Blinking text and pulsing badges can usually go altogether. A sale price in a strong colour does the same job without moving.

Where an animation explains something, such as how a product folds, a short video with play and pause controls does it better and lets the visitor choose.

The counter-case

Not all motion is a problem.

A menu that slides open when tapped, a short fade as a section appears, or a video the visitor starts are all within the guidelines, and can help a page feel responsive.

Movement that runs for less than five seconds and then stops needs no controls.

What causes harm is flashing, and motion that keeps going on its own with no way to stop it. Remove the first entirely, and give the second a pause button or take it away.

The check

1. Open your home page and watch it for ten seconds.
2. Note everything that moves by itself.
3. Remove anything that flashes.
4. Stop sliders advancing or add a pause button.
5. Set animated images to play once.
6. Write animation limits into ad agreements.
7. Repeat the check on a phone.

Step three is the one that cannot wait, because flashing is the only item here that can do physical harm, and removing it costs nothing.

Instructions that depend on seeing colour or position are covered in click the green button and other instructions.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.