Slideshows and Carousels
Western's Ashlar theme is intended to help users create engaging and inclusive content while maintaining their site's accessibility and overall performance.
Because of this, image slideshows, also known as a carousels, are not supported on Campus sites.
Slideshows are still technically supported in WordPress. However, authors should consider presenting information in an alternate format before choosing a slideshow option.
Ashlar does not include a slideshow component for the following reasons:
Slideshows are usually not accessible
Authors can control one level of accessibility by adding alt text to the images. But most out-of-the-box slideshow plugins are not accessible to our diverse range of visitors.
For example, many players do not have the necessary keyboard functionality needed for someone that doesn't use a mouse to navigate. Some do not have the semantics to tell users which buttons are the previous and next buttons, or the Play/Pause button.
Slideshows that auto-play, or change slides on their own, can also distract users from accomplishing the task at hand. This is especially true for users with a range of cognitive ability and disability, or for users that are experiencing stress/fatigue.
<a> tags), someone using assistive technology would not know what the links are and what they do.Slideshows come with a lot of data
Slideshows typically contain 7-10 photos, but some slideshows on Western sites contain 20 or more photos.
Images use up a lot of data in loading. This is especially burdensome for visitors relying on cellular data.
Users only interact with the first image
Serving up 7+ images in a slideshow would be one thing if visitors went through the entire slideshow each time. However, a web developer for Notre Dame, Eric Runyon, researched their slideshow component in 2013 to see which images users were clicking.
Runyon found that 89.1% of users clicked on the first image. Only 3.1% clicked on the second image, and less on subsequent images.
This means that for a vast majority of users, images are being loaded that are never being seen.
Accessible slideshows need a lot of code
Slideshows require a number of user interactions. The user needs to know:
- what is in the image,
- which slide in the sequence the image is
- how to go to the next or previous slide,
- how to pause the slideshow, and
- what type of widget is controlling the slideshow (i.e. are they interacting with a tabpanel, a list, a carousel, etc.?)
It requires a lot of HTML, JavaScript, and Accessible Rich Internet Applications (ARIA) to convey the experience to assistive technology.
This can become a performance issue. The HTML/JS/ARIA requires maintenance and improvement over time. This is a strain on resources for a component that does not have a significant return on investment.
Examples of "Accessible" Slideshows
These are slideshow patterns that were designed for accessibility:
These have been deemed accessible through agencies and working groups focused on accessibility. However, these examples have not been vetted by end users at Western, and cannot be guaranteed to be accessible with our systems. There is also no guarantee they will continue to be considered accessible.
Alternatives to Carousels/Slideshows
Cards
If you have a Drupal 8 site and would like slideshows to highlight upcoming events or link to other content, cards are the way to go. Cards fit very well with content like recent events, stories, or news. They are available as a block type, or can be set up to dynamically display content with views.
This is a basic card with an image, some text, and some highlighted terms.
You can find an examples of a card layout right on the Western homepage, under "Spotlight," "Featured," and "In the News."
Images with Description
Images with description are another way to highlight a series of photos, especially if there's info or links that accompany the visual.
This is the corresponding description of the image. It can accompany a nice amount of text, and include links to pages like our blocks reference.
This style can highlight all sorts of visuals, and even mirror the images to change what side the text and image land on (on desktop).
Page Layout
If the reason for wanting a slideshow is to highlight a series of photos, an alternative to a carousel could be testing different layout options to create a gallery-like page.
If you are in a Drupal 8 site, you can use Layout Builder to drop images in a 2-column, 3-column, or 4-column format. This would allow images to appear in a row and save space, while reducing potential barriers to that content.
Column templates are also available in WordPress through the Genesis Columns plugin. Contact Web Help if you would like assistance setting up Genesis Columns on a WordPress site.