Owlcarousel2: Keyboard navigation

Created on 5 Jun 2014 · 20Comments · Source: OwlCarousel2/OwlCarousel2

What do you think about adding keyboard navigation as a built-in feature, or a plugin?

feature request

Source

panameraa

👍3

Most helpful comment

@alexelash Here, you can use this for now:

var $owl = $( '#owlCarousel' );
$owl.owlCarousel(); //initialize

$(document).on('keydown', function( event ) { //attach event listener
    if(event.keyCode == 37) {
        $owl.trigger('prev.owl')
    }
    if(event.keyCode == 39) {
        $owl.trigger('next.owl')
    }
});

pajasevi on 9 Feb 2015

👍9

All 20 comments

Good idea! Should be added as a plugin.

witrin on 5 Jun 2014

This should really be built-in. Many people need keyboards to use the web--by building it into the carousel, accessibility will be improved by default.

marcysutton on 2 Jul 2014

👍4

+1 to @marcysutton. The web is for everyone, not just for mouse-using people with perfect eyesight.

yatil on 2 Jul 2014

👍1

I agree that this should be added as a default plugin. Currently the drag feature is part of the core, but this temporary. So both input methods (drag and keyboard) should at least optional available as plugins.

witrin on 3 Jul 2014

Love the plugin, but can't use it without keyboard functionality. Was going to use it on TV app but TV needs the next, prev and enter keys.

Hope it will be released soon.

This little hack will enable next and prev keys:

$(document).keydown( function(eventObject) {
if(eventObject.which==37) {//left arrow
$('.owl-prev').click();//emulates click on prev button
} else if(eventObject.which==39) {//right arrow
$('.owl-next').click();//emulates click on next button
}
} );

pgorski79 on 14 Aug 2014

👍1

The default elements for navigation are not focusable either (prev/next and dots). If they were, basic keyboard navigation (tab and enter/space) would be available now.

I was considering doing some work on that part and submitting a pull request but don't want to duplicate the effort if this'll be considered anyway?

matthewbeta on 28 Aug 2014

Modifying something like
$('#articles-top-navigation').children('.owl-dot').attr('tabindex', 0).attr('role', "button");
$('.owl-carousel .owl-controls .owl-nav div').attr('tabindex', 0).attr('role', "button");
$('.owl-carousel .owl-controls .owl-nav owl-next').attr('aria-label', "Nästa artikel");
$('.owl-carousel .owl-controls .owl-nav owl-prev').attr('aria-label', "Föregående artikel");
will make the dots and next/previous elements to be focusable and "buttons" but they still don't listen to keypresses.
Would be great to customize what kind of element you want for these items.
According to http://www.nczonline.net/blog/2013/01/29/you-cant-create-a-button/ you just want them to be buttons.

chka73 on 16 Oct 2014

I would also really appreciate if the slider would respect wcag2. Keyboard Usage is just the beginning ;)

markusfalk on 10 Dec 2014

👍2

FYI: W3C has a tutorial which describes how to do an accessible carousel: http://www.w3.org/WAI/tutorials/carousels/

Disclaimer: I’m the editor of that document.

yatil on 11 Dec 2014

What's the status of this functionality? I'm hoping to using Owl Carousel 2 with arrow keys.

alexelash on 9 Feb 2015

@alexelash Here, you can use this for now:

var $owl = $( '#owlCarousel' );
$owl.owlCarousel(); //initialize

$(document).on('keydown', function( event ) { //attach event listener
    if(event.keyCode == 37) {
        $owl.trigger('prev.owl')
    }
    if(event.keyCode == 39) {
        $owl.trigger('next.owl')
    }
});

pajasevi on 9 Feb 2015

👍9

Thank you @pajasevi

alexelash on 10 Feb 2015

In case anyone's interested, I'm working on an accessibility layer for Owl Carousel v2 which includes keyboard navigation as a feature: https://github.com/rtrvrtg/owlcarousel2-a11ylayer

I'm also working on a similar layer for v1, which v2 will hopefully have the same feature set as once I get round to it.