Carousels

Carousels have become very common web utility, and are essentially a collection of “slides” which may contain images and text, along with other types of content. Common names for carousels include slideshows and sliders, though the implementations can vary somewhat widely. Features also tend to vary as some progress through slides on an automatic timer and some allow manual progression to varying degrees, including forward progression-only, backward and forward progression, and, even, advancing directly to a specific slide.

Accessibility & Usability Considerations

Carousels present an interesting challenge to Web Accessibility and UX professionals, as many implementations of this multimedia presentation work on a timer, with the slides progressing after a set amount of time. Timers are notoriously problematic for users of assistive technologies (ATs), as it makes interacting with content far more difficult when the content is changing on an arbitrary schedule.

To be accessible, a Carousel needs to allow the user enough time to take-in the information on a slide. Many developers believe that adding too many controls will bog down the UI and they fail to recognize the power these controls have in enhancing accessibility.

Relation to WCAG/Section 508

The World Wide Web Consortium (W3C) outlines the following WCAG 2.0 relationships between carousels and accessibility compliance:

Success Criteria:

  • 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
  • 2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints. (Level A)
  • 2.2.2 Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, all of the following are true: Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and
    Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential. (Level A)
  • 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

How AudioEye Makes Carousel’s Better

AudioEye has done extensive research on Carousel UX preferences and has crafted an accessible solution that satisfies a wide spectrum of users.

AT User Solution

In line with the above mentioned guidelines, AudioEye works with its customers to ensure conformance with these WCAG 2.0 Success Criteria. To ensure optimal usability for all users, AudioEye works with its customers to update carousels through the application of updates made to the client source or by dynamically applying improvements through the integration of the AudioEye JavaScript. The focus of this effort includes the following:

  • Integrating fully visible and accessible controls to allow the user to pause and control carousel progression with the keyboard, mouse, and via touch
  • Ensuring elements within the carousel follow a logical focus order
  • Ensuring elements within the carousel are accessible. Common examples include, but not limited to:
    • images conveying information supply the user with descriptions via the ALT attribute
    • decorative images use alt=""
    • videos are captioned
    • text in the foreground passes color contrast requirements against images in the background
    • text may be enlarged when size is increased by a user/browser control
    • mobile support for pinch/zoom functionality
    • form elements and buttons are properly labelled
  • Making available meaningful alternatives to carousel content, including promoting access to AudioEye Web Enhancement Tools (if applicable)

AudioEye Web Personalization Tools Solution

For customers adopting AudioEye’s Ally Toolbar, end-users are provided an optimized user experience when engaging and interacting with carousels. First and foremost, all carousels accessed from an AudioEye enabled website are presented in the same manner and with the same controls. This “normalization” helps provide users with a consistent and predictable user experience.

The Reader solution solves the “Enough Time” problem by eliminating automatic progression, enabling users to navigate the carousel’s slides at their own pace. Likewise, from the Player utility, the audible experience is fully controlled by the end user, allowing them to listen and advance the carousel on-demand. These same utilities also simplify the controls to include a “previous slide” and “next slide” option. At the same time, we’ve actually given the user more options for navigation. These two actions can be triggered by clicking on one of the conveniently-labelled “Next Slide” and “Previous Slide” arrows, using the TAB key to focus on an arrow and pressing ENTER to engage, or by using the left and right arrow keys.

Helpful Links & Resources

Mark Baker

Read more posts by this author.

Subscribe to the AudioEye nClusion Newsletter

Get the latest industry news & insights delivered right to your inbox.

  or subscribe via RSS with Feedly!