Considerations for an Accessible Carousel

Whilst working, as part of a development team, on a web application that makes heavy use of carousels I wanted to understand the accessibility issues and accessible implementation of the carousel UI feature.

Opinions of Experts

Accessibility expert Jared Smith‘s site Should I Use A Carousel? and related interview inform on the potential accessibility issues and ineffectiveness of this UI feature.

Other good articles detailing accessibility considerations and accessible implementation for carousels are:

Accessibility Issues Overview

Accessibility issues detailed by the above articles:

  • Loss of focus for screen readers and keyboard users caused by content automatically disappearing.
  • Cognitive loss and distraction for all users but especially screen reader users caused by
    • not allowing enough time to read/consume the content
    • and not  associating the controls (semantically or programmatically) with the content.

Expert Implementation Advice

Advice to developers:

  • Provide controls to start, pause and stop elements and ensure these are keyboard navigable, have ample hit areas, and are labelled for screen readers
  • Remove autoplay functionality
  • Include appropriate alt text for images
  • Include wai-aria attributes in the controls

Solutions

In commercial endeavours the decision to replace the carousel with another UI feature or even just omit autoplay is often not the call of the contracting and accessibility minded front end developer. So if the site must contain a carousel and if that carousel does have to autoplay then the solution must be to give the user as much control as possible.

Summed up in the interview with Jared Smith, where he discourages the use of carousels altogether but provides advice if this is not an option:

 “..we recommend not having it automatically advance. Give control of the content presentation to the user. If it does auto-advance, provide a pause link or button, and ensure that the carousel pauses if the user hovers their mouse over or sets keyboard focus to the carousel or its controls.”

Effectiveness of carousels

This post is geared towards the accessibility of carousels and similar UI elements. More information on the actual effectiveness of this method of displaying content can be found on
Brad Frost’s post on carousels and the Jared Smith links at the start of this post.

Leave a Reply

Your email address will not be published.