Stop the carousel rotating on its own, or give it a visible pause button and a slow pace, and put the one message that matters in still text where everyone can read it.

The banner that moves on

Many home pages open with a carousel: a large banner that changes every few seconds, cycling through offers, news and photographs.

For a fast reader, it is a mild annoyance. For someone who reads slowly, it is a sentence that disappears halfway through.

For someone with attention difficulties, it is movement in the corner of the eye that pulls attention away from everything else on the page.

And the business has usually put its most important message in one of those slides, where most visitors see it for a few seconds, if at all.

Who it fails

The fourth is the one designers rarely picture. Someone using magnification sees a small part of the banner at a time, and by the time they have moved across to read the end of a line, the slide has changed.

What WCAG asks for

WCAG 2.0, the set of accessibility guidelines websites are usually judged against, includes a requirement called pause, stop, hide.

If movement starts by itself, runs for longer than five seconds and appears next to other content, the page has to offer the visitor a way to halt it, by pausing, stopping or hiding it.

It sits at level A, the most basic level, which means any site working towards the usual AA standard has to meet it. Most carousels do not.

Hover is not a pause button

Many carousels stop while the mouse pointer rests on them and call that a pause. It helps some visitors and fails many.

Keyboard users never hover. Phone and tablet users cannot hover at all. And a visitor reading with a magnifier may be moving the pointer around precisely in order to read, which starts the carousel again.

A real pause is a visible button, labelled so that a screen reader announces it, which stays paused until the visitor chooses otherwise.

If you keep a carousel

Some businesses have good reasons to keep one. If so, make it behave.

Slow it down so each slide stays long enough to read twice, which for a sentence and a button is far longer than the few seconds most carousels allow.

Add a visible pause button, make the arrows and dots reachable by keyboard with labels that say what they do, and stop rotating for good once someone uses any of the controls.

Better still, stop after one full cycle. Or never start it: display the first slide and leave the rest for visitors to step through.

A worked example

A test prep tutor runs evening and weekend courses for professional school admission tests, from a classroom above a row of shops near a university.

The business's home page opened with a carousel of five slides changing every four seconds: the next course start date, a free practice test evening, private tutoring, a student quote and a photograph of the classroom.

The office regularly took calls asking when the next course started. The date was on the home page, on the first slide, visible for four seconds in every twenty.

The rebuild removed the rotation. The next start date and the registration deadline went into a line of plain text under the main heading, where they stay still.

The other four slides became short sections further down the page. A visitor now reads the dates at their own pace, and a screen reader announces them in the order the page was written.

Put the important message where it stays still

The deeper problem with carousels is that they let a business avoid deciding what matters most.

Five slides make five messages of equal weight, each visible a fifth of the time. A home page that leads with one still message, written as text rather than set inside an image, is read by everyone who arrives.

Ask which single thing a visitor most needs on arrival: the next date, the offer, the phone number, what you do. Put that in still text near the top, and let everything else follow down the page.

On phones

On a phone, a carousel often shrinks to a strip of small text over a busy photograph, rotating while the visitor tries to scroll past it.

The dots for moving between slides become targets too small to tap reliably, and a swipe meant to scroll the page moves the carousel instead.

Many responsive designs simply hide the carousel on small screens. If the message in it mattered, it should not disappear with it.

Testing it

Put the mouse aside and use only the Tab key. You should be able to reach a pause button and use it.

Then run a screen reader over the home page, such as the VoiceOver built into Apple devices or the free NVDA for Windows. It should not announce slides you cannot see, or jump about while you listen.

Finally, ask someone who reads slowly to read each slide aloud as it appears. If they cannot finish, nor can many of your customers.

The counter-case

A carousel that never moves on its own, where visitors click to see the next image, does not fall under the requirement at all, and can be a reasonable way to show a few photographs.

A photography or design portfolio, where the images are the content, may keep a slideshow, provided it has a pause button and starts paused or slowly.

And a site partway through a redesign may not be able to remove its carousel this month. Slowing it and adding a pause button is a sensible first step.

For most business home pages, though, the answer is to stop the movement and put the important message where it stays still.

What to do

  1. Count the slides and time each one.
  2. Decide the one message visitors most need.
  3. Put it in still text near the top.
  4. Stop automatic rotation, or add a pause button.
  5. Make the controls work with a keyboard.
  6. Move the other slides into page sections.
  7. Test with a screen reader and a slow reader.

Step two does most of the work. Once the business has decided which message matters most, the carousel stops being a home for five equal messages and becomes something the page can do without.

What the same carousel costs in loading time is covered in sliders that load every slide before the first.

Frequently asked questions

Why are rotating carousels an accessibility problem?

They change before slower readers finish, distract people with attention difficulties, move under screen magnifiers, and often have controls that keyboard and screen reader users cannot reach.

What does WCAG require for moving content?

Movement that starts by itself, continues past five seconds and runs alongside other content must come with a pause, stop or hide control that visitors can use.

Is pausing on hover enough?

No. Keyboard users never hover, phone users cannot, and magnifier users move the pointer to read. A real pause is a visible, labelled button that stays paused.

How slow should a carousel be?

Slow enough to read each slide twice, which is far longer than most allow. Better still, stop after one cycle, or let visitors move through the slides themselves.

Where should the important message go?

In still text near the top of the page, not inside a rotating slide or an image, so every visitor and every screen reader can read it.

Can I keep a carousel at all?

Yes, if it starts paused or slowly, has a visible pause button and keyboard controls, and does not carry the one message visitors most need.

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.

Home page message on a rotating slide?

Tell us which page it is on. We will explain what visitors miss and what to change.

Start a Conversation