Owl Carousel

Owl Carousel is a jQuery plugin for creating responsive carousel sliders. We can improve its accessibility by making the controls respond to keyboard events or making the carousel items able to receive focus.

Single Item Per Page

If the carousel has only a single item per page, we can set up the carousel to listen for the left and right arrow keys when the carousel has focus, and use these to navigate through the carousel. We can also allow the prev and next buttons to receive focus, and listen for the Enter key when they are in focus.

In addition, the visible item is given the attribute aria-selected="true" and instructions to keyboard users are shown only when the carousel is focused.

$("#owl-single-example").owlCarousel({
  singleItem : true,
  pagination : false,
  navigation : true, // show next and previous buttons
  addClassActive : true, // visible items have class active
  afterInit : function() { 

    $('#owl-single-example .owl-item').attr('aria-selected','false');
    $('#owl-single-example .owl-item.active').attr('aria-selected','true'); // let screen readers know an item is active

    // apply meta info to next and previous buttons and make them focusable
    $('#owl-single-example .owl-prev').attr('role','button').attr('title','Previous');
    $('#owl-single-example .owl-next').attr('role','button').attr('title','Next');
    $('#owl-single-example, .owl-prev, .owl-next').attr('tabindex','0');

    // add instructions to keyboard users that are only visible when the carousel is focused
    $('#owl-single-example .owl-wrapper-outer').append('
Use left and right arrow keys to navigate.
');

    // listen for keyboard input
    $(document).on('keydown', function(e){

        var $focusedElement = $(document.activeElement),
        singleOwl = $("#owl-single-example").data('owlCarousel'),
            type = e.which == 39? 'next': null,
            type = e.which == 37? 'prev': type,
            type = e.which == 13? 'enter':type;

        // if the carousel is focused, use left and right arrow keys to navigate
        if($focusedElement.attr('id') === 'owl-single-example'){

          if (type == 'next') {
            singleOwl.next();
          } else if (type == 'prev') {
            singleOwl.prev();
          }

        // if the prev and next buttons are focused, catch "Enter" and navigate in the right direction
        } else if (type == 'enter') {
        if ($focusedElement.hasClass('owl-next')) {
          singleOwl.next();
        } else if ($focusedElement.hasClass('owl-prev')) {
          singleOwl.prev();
        }
      }
  });
},
// let screen readers know which slide is active after navigation or reinit
afterAction : function() {
  $('#owl-single-example .owl-item').attr('aria-selected','false');
  $('#owl-single-example .owl-item.active').attr('aria-selected','true');
}
});

Multiple Items Per Page

With multiple slider items per page, this design pattern doesn't work as well, because multiple items at any one time need to be given aria-selected="true". Instead, we can give a tabindex to the items themselves, allowing keyboard users to tab through the slides.

$("#owl-multi-example").owlCarousel({

  pagination : false, // must be set to false or the carousel won't move to bring out of sight elements into view on focus
  navigation : false, 

  afterInit : function() { 
    // make individual items focusable
    $('#owl-multi-example .owl-item').attr('aria-selected','false').attr('tabindex','0');
    $('#owl-multi-example').attr('tabindex','0');

    // on when an item has focus, let screen readers know it is active
    $('#owl-multi-example .owl-item').on('focus',function() {
      $('#owl-multi-example .owl-item').attr('aria-selected','false');
      $(this).attr('aria-selected','true');
    });

    // show instructions to keyboard users when the carousel is focused
    $('#owl-multi-example .owl-wrapper-outer').append('
Use tab and shift+tab to navigate.
');

  }

});