There are several factors that contribute to making a slideshow accessible and inline with modern standards. First, the user needs to have the ability to keyboard navigate within the slideshow. This includes keyboard controls like previous slide and next slide. If there is text within the slide, keyboard navigation should allow users to tab into this text as well.
Secondly, a screen reader should be able to identify whether a user has tabbed into a slideshow, and identify which slide in the series is being displayed. Additionally, if there is text within a slide, a screen reader should be able to read this as well.
Though slider keyboard navigation could be developed entirely from scratch, one slider plugin in particular offers a robust javascript API that allows for custom functionality. That plugin is called Slider Revolution. Because keyboard navigation is so important to accessibility, Slider Revolution’s built in functions are very useful.
In the code below, navigation functionality for the previous and next slides are added.
var $slider = $( '#rev_slider_1_1' );
var $mobileSlider = $( '#rev_slider_2_2' );
$slider.append( '<a href="#" title="next slide" role="button" aria-label="next slide" class="next"></a>' );
$slider.prepend( '<a href="#" title="previous slide" role="button" aria-label="previous slide" class="prev"></a>' );
var $next = $( '#rev_slider_1_1 .next' );
var $prev = $( '#rev_slider_1_1 .prev' );
$next.on( 'click', function( e ) {
e.preventDefault();
$slider.revnext();
$mobileSlider.revnext();
});
$prev.on( 'click', function( e ) {
e.preventDefault();
$slider.revprev();
$mobileSlider.revprev();
});
In this case, Slider Revolution’s functions for next slide and previous slide can be bound to the left and right arrow icons on the slideshow. These slider controls can be used with a traditional mouse as well as keyboard navigation.
Speaking of keyboard navigation, the user will need to tab, or focus, into these new custom slider components. To accomplish this, the “tab-index” html attribute can be utilized. Tab index, as one might expect, allows the user to tab into an element on the page. A tab index of 0 uses the natural page flow to set the tab order. This makes the most sense for this particular use case.
This code example shows how to add both aria-labels and the tab index attributes to a slider.
var $slider = $( '#rev_slider_1_1' );
$slider.attr({
'tabindex': 0,
'aria-label': 'Slideshow'
});
Now that the slideshow is full navigable via mouse or keyboard, some screen reader enhancements can be made as well. Modern screen readers can identify where a user is on the page using aria labels. An aria label is an html 5 attribute that acts as a landmark that tells the screen reader to identify an element that’s getting focus. Aria labels can be added to the slideshow’s main container, the containers for each slide in the series, as well as text inside each slide. In the code above, an aria label is added to the main slideshow container using the .attr() method. With these aria labels attached, screen reader users will hear an audio cue confirming which element of the slide show is getting focus.
Combining all of these components adds up to a slideshow that’s more accessible than most!
