The sad truth about jQuery slideshows (and slideshow plugins) is that only a very small percentage of them is built by taking accessibility into proper consideration. Even the most popular jQuery slideshows are really poor when it comes to accessibility. In this post I'd like to outline some key points to keep in mind.
Proper markup
Assistive technologies needs a properly marked up structure. In short:
- Never omit the
altattribute for images. - Use WAI-ARIA roles if supported.
- Make sure that the HTML structure is still accessible when JavaScript and CSS are disabled or not supported.
- Avoid obsolete or presentational elements.
For example:
<div id="slider"> <ul> <li><img src="1.jpg" alt="Image 1" /></li> <li><img src="2.jpg" alt="Image 2" /></li> <li><img src="3.jpg" alt="Image 3" /></li> </ul> </div>
Using a list is really useful in a browser like Lynx, where, if you use the images without wrapping them, the final rendering is a long string containing all the values of the alt attributes, without spacing.
Proper CSS
To hide elements with CSS, you should never use the display or visibility properties. Screen readers interpret them and suppress the reading of your content.
You can use a different approach, as follows:
.hidden {
width: 0;
height: 0;
overflow: hidden;
line-height: 1px;
font-size: 1px;
}
or better:
.hidden {
position: absolute;
top: -1000em;
}
Other things to bear in mind are:
- Use relative lengths for fonts.
- Use a proper color contrast.
- Avoid fixed dimensions.
Proper jQuery
One thing above all: keyboard navigation. By using the four arrows of the keyboard, a user should be able to move through your slides with ease. Don't try to use keyboard shortcuts on your slideshow because assistive technologies already provide the same feature and the risk is to override the default shortcuts of the user-agent.
A good thing you can do is to map your click events to the corresponding keyboard events so that a user is able to choose how to navigate your slides.
Generating content is always troublesome, because you don't actually know what kind of assistive software will be used to view your slides, so the best thing you can do is to limit this feature whenever it's possible. In fact, updating the DOM is a visual operation for a sighted user, but a screen reader behaves differently.
For example, it might ignore the updated content and the user wouldn't be notified of the change.
As a fallback mechanism, stick to the markup to avoid any possible problem, now and in the future. HTML is the only thing that assistive technologies interpret consistently, so code it properly.
