Slider Demo

This page demonstrates creating an accessible slider using Owl Carousel 2.

Pizza is delicious.

Order Pizza

Maybe not that healthy.

Order Pizza

But delicious.

Order Pizza

Now you’re hungry...

Order Pizza

and it’s not even lunchtime.

Order Pizza

Owl is a nice carousel, but there are a few things that can be done to improve accessibility.

Make the previous and next navigation into actual buttons - This can be done by setting the navElement option in Owl like this: navElement: 'button'. By default, the controls are divs and not keyboard accessible. For more control, you could also craete your own set of buttons.

Add a play/pause button for auto-rotating sliders - To avoid page focus confusion, one button is preferred to showing and hiding separate play and pause buttons. Here is one way this could be handled with javascript:

$('.play').on('click',function(){
    if($(this).hasClass('stop')){
      owl.trigger('stop.owl.autoplay')
      $(this).html('Play').removeClass('stop').attr('aria-label', 'Start slide rotation.');
    } else {
      owl.trigger('play.owl.autoplay',[5000])
      $(this).html('Pause').addClass('stop').attr('aria-label', 'Pause slide rotation.');
    }
})

// Listen for carousel drag
owl.on('drag.owl.carousel', function(event) {
  $('.play').html('Pause').addClass('stop').attr('aria-label', 'Pause slide rotation.');
})

Hide inactive slides - For sliders with text and links, it is better to hide any slides that are not currently visible on screen so the page focus doesn’t get lost. Here is one way to do this with CSS (Note: this messes with the transitions between slides which is why I’m fiddling with the opacity. There is probably a cleaner way).
```
.owl-item {
  visibility: hidden;
  opacity: 0;
  @include transition(opacity, 0.5s, ease-in-out);
  &.active {
    visibility: visible;
    opacity: 1;
  }
}
```
Add aria-labels to the controls - This can help make them more descriptive of their function. To take this further, it could be nice to do something dynamic with the label to better describe which slide is active. Something like “Showing slide two of five.”
Include a title to help identify the slilder as a slider - In this case it is visible to screen readers only as it isn’t necessary for sighted users.

Slider Demo

Pizza slideshow.