Carousels

Carousels, commonly also referred to as “slide shows” or “sliders”, display a series of content items one at a time; for example, a series of product promotions. This page describes the accessibility issues raised by carousels.

Accessibility Issues

According to Jared Smith, “Carousels pose accessibility issues for keyboard and screen reader users that simply cannot be adequately addressed by markup or hacks. Carousels are this decade’s <blink> tag.”

Carousels have significant accessibility issues. These include: distraction, autoplay, missing or poorly designed controls, and hidden content.

Distraction

Carousels are usually presented in parallel with other content. When set to autoplay, a carousel’s moving / blinking / scrolling information will distract the reader from the other content on the webpage. For some users, this makes it difficult (or even impossible) to read any other content.

For some users, the presence of any movement on the page will trigger vertigo. For these users, carousels will literally make them ill. This means it is difficult (if not impossible) to visit or use the page.

Autoplay

Carousels that rotate automatically often do not provide enough time for all users to read or understand the content on each slide. This can be annoying for many users, and a blocker for others. It poses particular challenges for users with low reading levels, mobility impairments, cognitive impairments, and users reading content in a second (or other) language.

Missing or Poorly Designed Controls

Users must have controls to pause or stop the carousel. Some users need to hide the carousel entirely.

Controls (if they exist) are often:

• not visible (i.e., they are not large enough to be seen and/or they do not meet colour contrast requirements).
• not accessible to the keyboard / mouse / touch and other interaction alternatives.
• not correctly labelled for screen readers.

Hidden Content

Carousels, by design, hide content. It is very rare that users view every single slide and read all the text hidden in them. As a result, content hidden within a carousel is often missed.

Carousels also hide content in a way that search engines do not like. More than simply hurting the ranking of the page, a carousel may keep people from finding what they are looking for.

Finally, most users skip carousels due to banner blindness. The carousel is often seen as just another ad to be skipped over and ignored. Users expect to find the information they need to move through their task in the page content, not in the carousel.