OzWiki

Making Slideshows Accessible

Slideshows, also known as carousels or animated galleries, are a way of getting the most out of limited space. By displaying large images in rotation that are linked to specific webpages, a website can deliver a series of informative messages or calls to action to the user while only taking up the space of one such image. That sounds like a great idea, but the way slideshows are integrated into websites can create considerable difficulties for users with disabilities.

In all cases, considerable thought should be given to whether a slideshow is going to achieve the best result for a website. Once you’ve decided you do want to use a slideshow, you also take on the responsibility of making sure the slideshow is accessible.

You’re most likely here because you need to make sure the way you use a slideshow on your web pages makes it accessible to people with disabilities.

You might have a specific problem, like:

  • how to provide an accessible alternative to a slideshow
  • how to avoid keyboard traps in slideshows
  • how to handle keyboard focus
  • which user controls enhance accessibility
  • what to do when style sheets are disabled

Perhaps you need a comprehensive list of likely accessibility issues with slideshows – and how to address them. Or maybe you just want to ask a direct question and get a clear, expert response.

You’re in the right place.

OzWiki will tell you what you need to know in order to use slideshows in an accessible way. The Slideshow section details 22 accessibility problems and how to address them, demonstrating compliance with 16 WCAG Level A success criteria, and 6 WCAG Level AA success criteria.

As a subscriber, you’ll also be able to request further or more detailed information relating to your specific situation.

Other resources

We have an article on SitePoint: The Unbearable Inaccessibility of Slideshows.

We also have an example of an accessible slideshow on GitHub. This is the same code we’re running on the AccessibilityOz home page.

See an example

Slideshow moves the content with style sheets disabled

Slideshow moves the content with style sheets disabled

CategorySlideshow
TopicStyle Sheets
WCAG SC 1.1.1: Non-text Content

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed:

  • Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to WCAG 2.0 guideline 4.1 for additional requirements for controls and content that accepts user input.)
  • Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to WCAG 2.0 guideline 1.2 for additional requirements for media.)
  • Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
  • Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
  • CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
  • Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html

See more errors for this SC

LevelA
Technique(s)
ImpactHigh

Error

When style sheets are disabled the slideshow moves the content up and down the page.

Incorrect Example(s)

Screenshot 1:With style sheets enabled a running show with the text 'Shop Hot Products' takes up most of the screen. Visible is also an image of an iPhone, Michael Kors handbags and Sony Playstation 4.
Screenshot 2:With style sheets disabled there are three images of New Mexico rocks with the text 'Brighten the ambience of your living space with this Collection of crystals from the Land of Enchantment'. Underneath is the text 'Save up to 70%' and the top half of an image of a blender.
Screenshot 3:With style sheets disabled the rocks have disappeared and been replaced with the image of the blender and the text 'Save up to 70%'. Underneath is text about 'Gift cards from popular brands'.
Screenshot 4:With style sheets disabled all the previous content has disappeared and there is an image of a running shoe and the text 'Shop Hot Products'. Visible is also an image of an iPhone, Michael Kors handbags and Sony Playstation 4.

Solution

Ensure that when style sheets are disabled, the slideshow does not move the content.

Already a subscriber?

Log in!

Want access?

Subscribe!

OzWiki is an accessible resource that provides best known methods to achieve A & AA level design and interaction for web content in areas such as Audio, Video, Link, Captcha, Maps, Navigation and more. These outlined accessibility errors, examples and solutions help you become 508 compliant by demonstrating associated WCAG 2.0 success criteria and techniques.

Gain access to more detailed information on all OzWiki categories for only $39/month by purchasing a subscription today! You can cancel your subscription at any time.