Accessible Alternatives to Website Slideshows

The space on a website’s homepage is often limited and precious. During the buildout of a website it’s often that there are conflicting priorities about what shows “above the fold”. The homepage slideshow seemed to offer an apparent solution to that problem by cramming several content pieces into the same space, rotating automatically. The ability to show more content in less space in a way that looked cool made slideshows attractive and they can now be seen all over the web. They’d be a great idea if it weren’t for two big problems: they aren’t compliant with web accessibility standards and they don’t work.

Slideshows aren’t effective

Slideshows were a popular trend at one time. All of the utility websites we worked on wanted them in their redesigned websites because they seemed innovative and engaging. It turns out, they’re not and site visitors tend not to interact with them compared to other content. Heat maps show that less than 1% of site visitors click on slideshow links. We’ve seen numerous studies around this and some claim slightly higher engagement rates, but most are consistent at about 1% and none of the studies we’ve seen make it over 10%. For all the prominent space slideshows often fill, one would hope they’d make a bigger impact — but the numbers say otherwise.

Slideshows are now often associated with ads or junk content

Rotating content presentations didn’t only provide the opportunity to squeeze more into less using the website’s own content. Slideshows have also provided the ability to sell a growing number of ads in a fixed amount of space.

Over time, this trained website visitors to mentally associate slideshows as the web page equivalent of junk mail. Even if the content in the slideshow is legitimate, most site visitors will never move through it to find out. This doesn’t happen by accident, but people actively block it out, exhibiting “banner blindness,” which the Nielsen Norman Group defines as “people’s tendency to ignore page elements that they perceive (correctly or incorrectly) to be ads.”

Slideshows aren’t accessible

Slideshows present numerous accessibility challenges so I won’t go into a lot of detail on any of the particular aspects. Here are some of the primary issues that tend to occur with slideshows on a utility website:

  • Slideshows typically rotate automatically. Any content that automatically scrolls or animates needs a clear and fully-accessible way to turn it off. WCAG 2.1 success criterion 2.2.2, Pause, Stop, Hide, explains the issue further.
  • They’re usually not easy to use on mobile. Accidentally selecting a link when meaning to scroll horizontally or choose a previous or next button happens to everyone, but the ability to go back and try again with more precise motor skills can’t be taken for granted. Taking mobile use into account can be just as important as the desktop experience.
  • Screen readers have lots of trouble with slideshows. What should happen if a slideshow were made to be more accessible is that a site visitor using a screen reader would know they’re interacting with a slideshow; they’d have intuitive, clearly-labeled navigation controls that are logically positioned in the tab sequence; the element within the slideshow that they’re interacting with have to match the visual presentation on the screen, meaning they wouldn’t be navigating and using a currently-invisible piece of content (likely indicating an issue with focus order and other WCAG requirements); and more. This is on top of the content within each section being individually accessible. It’s a lot to get right and there’s a lot that can and usually does go wrong.

Alternatives to slideshows in website designs for utility organizations

Focus or target messaging

The “more, more, more” mindset when it comes to how many messages to deliver to a site visitor hasn’t proven effective. One option to replace the slideshow is to choose a specific and a focused piece of content that is most likely to resonate with the target audience.

Introduce high-level topics, with dedicated pages for detailed information

Getting rid of a slideshow doesn’t mean hiding the information, but it can be more effective to introduce a subject with a clear and accessible link, keeping the rest of the detail on a separate and focused page. With too much competing for one’s attention, all of the extra images, headings, sub-headings, and copy probably will have the opposite effect than what’s intended.

Depending on the subject, presenting them in a straightforward manner and letting the site visitor choose what they’re looking for can be a huge improvement.

Columns or buckets

Two or three column displays of content can be a great compromise to a rotating version of the same. The right amount of content is less likely to overwhelm and more like to engage. Columns that are always present offer a few distinct and important benefits that rotating slideshows do not:

  • The reader knows how much material there is up-front. All of the content is available without going down the rabbit hole to find out.
  • The mobile experience should be much better than a rotating slideshow, as long as the design is responsive and the content stacks or organizes properly. Slideshows are notoriously difficult to use on mobile devices.
  • The labels and structure are much easier to build initially and maintain over time. Always-present columns are more what-you-see-is-what-you-get. Slideshows, on the other hand, require developers to make sure they work properly with screen readers and keyboards, and that all labels, navigation, and focus are accessible — even as content is updated.

Update content as needed

One of the hesitations to getting rid of slideshows is the fear that it means giving up the chance to highlight every story that needs highlighting. In reality, story or news item probably doesn’t need to be in focus at all times for your utility organization. It can be much more intuitive for your site visitor to deliberately choose one to three top stories and give them the space they deserve — and update when it’s time to update.