Western web themes won't provide slideshow/carousel patterns

Context

The slideshow/carousel pattern (a set of content that rotates on a timed loop or with player controls) tends to have more inaccessible versions than accessible ones. While authors can control one level of accessibility by adding alt text to the images, the pattern itself can have accessibility problems.

For example, many players don't have the necessary keyboard functionality needed for someone that doesn't use a mouse to navigate. Slideshows that autoplay or don't have a pause feature can distract the user from the tasks they want to do on the site.

Slideshows also take on a lot of technical debt with the HTML, CSS, JS, and ARIA needed to make it accessible (example ARIA carousel pattern). For a component where a 2013 study showed 89.1% of users only click on the first image, this can become a site performance issue to load slideshow content without a huge return on investment.

Decision

To better ensure accessibility and inclusion, we will not support a slideshow/carousel pattern in Western's Drupal platform and Ashlar. Alternative display options, especially for image content, are available in the Ashlar pattern library and the Drupal block reference guide.

Note: Slideshows are still technically supported in WordPress as the platform and plugins are mainly managed by a third party vendor. WordPress site editors should prioritize more usable and accessible design patterns, instead of choosing a slideshow.

Status

Consequences

Benefits

  • By not implementing a slideshow pattern, we greatly reduce the amount of code to maintain. We also reduce the time to test, build, and maintain accessibility of a slideshow component.
  • Slideshows can become confusing interfaces to navigate. By not providing a pattern, we don't introduce extra confusion or frustration to our site visitors.
  • Alternative displays like cards, images with description, and grid layouts take less data for a browser to load, which makes page content faster to load.
    • Faster page load also factors into a site's search engine optimization (SEO), which can rank pages higher in search results.

Considerations

Site editors will need to consider other page designs and displays if they want to showcase a lot of images or graphical content. However, this usually takes less work than the time and effort needed for managing slideshow pattern code.