JavaScript Disabled

To enjoy the full experience available to this page, please enable JavaScript for this browser.

Inclusive and Responsive Slide-show UX

First published by : May 2017

Slide-shows are a show/hide strategy used to chunk information that our users can consume on their demand. You may know them as carousels, named after round projector cassettes photo slides are loaded into.

Off-the-shelf slide-show plug-ins are complicated and seldom accessible, usable, or responsive. They often cycle slides automatically and have poor, if any controls. They also proliferate the myth that we are unable to create them for ourselves , which leads to our accepting the compromise in the user experience.

There is some knowledge and technique required to craft a bespoke slide-show, but they are far from our reach to build well, if not better. Perhaps we should be encouraged to?

Shared Learning

If you think this content is useful to your Friends, colleagues, or connections, then please consider flagging it to them.

I love to Experience Learning Too. Your feedback is welcome.

Building a Bespoke Slide-show?

I do not rush to use off-the-shelf frameworks. Yes, they can be cost effective, but may create a compromise between what our users need, and what they are going to get. Some are very good but configuring them can take as long as building one.

I wanted to build my own slide-show to understand the complexities; consider their compromises; and to explore opportunities for improved accessibility, usability, and responsiveness. It's a work in progress, but my observations and ease of build remind me that these "off-the-shelf" interactions are generally well engineered, but provide far from an inclusive user experience.

Let's see if we can't fix that?

A Solution

Example Slide-show (wireframe)

Pat's Slide-show

As a wireframe, this slide-show sports the following usability features:

  • Control buttons accessible via the tabindex and keyboard
  • Slide numbers on the slide-show breadcrumb with different shape and highlight
  • Basic responsiveness

Accessibility

The slide-show content remains accessible under the following conditions:

  • JavaScript disabled
  • CSS disabled
  • JavaScript and CSS disabled
  • User agent enlargement of the base font size.

Responsiveness

Although an incomplete solution, the slide-show controls are optimised in the 'mobile' view to enable more space in which to display the content while having a well-sized 50px x 50px hit area for touch.

In the larger tablet and desktop browser window scales, the Previous and Next control buttons expand full height to make the motor effort less exacting when using pointing devices.

Work to Do

To complete this work, I need to fully convert W3C School's JS to JQuery so I can call the controls dynamically so they display only when JS and CSS are enabled.


Slide-show Design

The slide-show widget is a show/hide strategy used to chunk information and to offer it for our users to consume on their demand. Automated slide-shows. require design adjuncts to provide the accessibility and usability our diverse users may require.

The improper use and design of your slide-shows may risk alienating some of your users and may even risk their accessing the information at all.

Slide-show Design Considerations
Area Potential Issue Possible Solution
Document Object Model Architecture The DOM semantics may be broken for some users if the slide-show is created in a non-semantic way. Avoid over-use of non-semantic elements such as div and span: consider the tabindex, semantic headings, and the use of appropriate native HTML controls such as buttons for controls. Design the slide-show to degrade gracefully (to be understood without CSS or JS available in the browser).
Content Availability Loading slide content from external files will fail if JavaScript (JS) is not enabled in the browser.

If the slide content is not essential, then do not include it. Place slide content on the host page so it will display when CSS and JS are disabled.

Conversely, if you have a great deal of content to convey, then consider an alternative show/hide strategy such as tabs.

Timing and Navigation Timed content may overload our user's cognitive or motor abilities. Offer a pause control, or do not automate the slide-show progression but invite our user to interact with it. If content MUST be 'seen', then why are you hiding it in the first place?
Controls Out-of-the-box slide-show solutions often fail to follow conventions or guidance for size, values (or native text), colour, shape, and (semantic) orientation.

Use CSS and JS to show and hide control labels and values as required for our visual users while enabling an accurate control description to our non-visual users.

Make the controls large enough to ease our users' motor effort.

Although control design habits, such as the use of circles to denote a breadcrumb through the slide-show, have been largely learned, it is not right to use only colour to impart their state or meaning.

Responsiveness Most off-the-shelf slide-show plug-ins or widgets are fixed height, which may compromise content presentation.

It is not difficult to make the height of the slide-show respond to its content. However, this may present a compromised experience when offering consistent placement of the controls.

A solution is to move the controls outside the slide-show area, but the controls may then slip beyond the fold and leave our novice user disoriented?

Test your solution, or limit the content in the slide-show

Images and Image Text It is tempting to place text within images to display in the slide-show, which is not accessible equally to all users. "Responsive images" may "shrink" too small for the text to be read.

Take care to use HTML text in your slide-show, or to offer an alternative access to similar content taking care to offer the same experience of it - a major point of failure in many designs.

Test your solution, or limit the content in the slide-show

An Alternative Approach

It is possible to employ only HTML and CSS to create a slide-show.

The technique was to create the slide-show frame from a div set to overflow:hidden;, and then to line up the slides as identified divs. The controls were then repeated within each slide div and set to call the bookmark corresponding to the required slide's <div id="identity">.

Show an example HTML/CSS slideshow as an overlay.

Screen grab of the example alternative HTML/CSS slideshow
Example slide overlay with Previous, Next, and close user interface controls

This alternative technique is effective where JS skills or availability are in question and ultimately it is accessible and usable. It takes a little more jigging about setting up the links but like everything, once templated it is easy to adapt to each new slide-show requirement.

Mask slides with the parent div and navigate between them using links to their ids
Default demonstration image

Slide One Title

Paragraph lorum ipsum no declarat entiwindus et canis duet disclosat est dieumaragraph lorum ipsum no declarat entiwindus et canis duet disclosat est dieum.

Slide Two Title

  • Paragraph lorum ipsum no declarat entiwindus et canis duet disclosat est dieum.
  • Paragraph lorum ipsum no declarat entiwindus et canis duet disclosat est dieum.

Slide Three Title

Paragraph lorum ipsum no declarat entiwindus et canis duet disclosat est dieumaragraph lorum ipsum no declarat entiwindus et canis duet disclosat est dieum.

Paragraph lorum ipsum no declarat entiwindus et canis duet disclosat est dieum.

CSS3 Keyframes

This wireframe demonstrates the CSS3 keyframes animation technique, which results in an automated slide transition.

Adding control buttons including a Pause button and slide counters or links gives control of the presentation to our user and improves the usability and accessibility, and therefore the universal experience.

Important: Timed presentation of content outside of our users' control is not advised. Our users read, cognate, and interpret content at their own pace and not yours or our design team's.

For example, can you identify the tenth word from the end of Slide Three? (Hint: You can click the slideshow to pause and to re-start it, but try completing the task first without pausing.)

Wireframe CSS3 Keyframe presentation
PAUSED

Slide One Title

Paragraph lorum ipsum no declarat entiwindus et canis duet disclosat est dieumaragraph lorum ipsum no declarat entiwindus et canis duet disclosat est dieum.

Slide Two Title

  • Paragraph lorum ipsum no declarat entiwindus et canis duet disclosat est dieum.
  • Paragraph lorum ipsum no declarat entiwindus et canis duet disclosat est dieum.

Slide Three Title

Paragraph lorum ipsum no declarat entiwindus et canis duet disclosat est dieumaragraph lorum ipsum no declarat entiwindus et canis duet disclosat est dieum.

Paragraph tenth ipsum no declarat entiwindus et fifth duet disclosat est dieum.

Summary

It's not difficult to make a reasonably inclusive, accessible, useable, learnable, and useful slide-show. At least, not with the support of a UI developer or engineer. So, why do we feel forced into using propriety slide-shows off-the-shelf that fail to meet our users' needs?

As with all things design of course, it depends.

❮ More Articles My Profile ❯

Leave a Comment

Whoops! You need JavaScript enabled to use the Facebook comments plug in.

Facebook comments plug-in

Sponsored Ads

Ads collated  by Google Ad Sense. Click away..!

Top