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

Category	Slideshows
Topic	Style 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
Level	A
Technique(s)
Impact	High

Error

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

Solution

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

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.