How to make Owl Carousel keyboard accessible

Question

According to the Web Content Accessibility Guidelines, in order for a website to be considered accessible, you should be able to use a keyboard for all functionality of the content:

All functionality of the content is operable through a keyboard interface

I'm using Owl Carousel 2, and added arrows and linked them like so:

$('.carousel-left-arrow').click(function () {
        owl.trigger('next.owl.carousel');
    });

But those arrows are not accessible using the keyboard, only the mouse. How can I make them accessible?

Answer 1

First, in order for a div to be accessible by keyboard, you need to add the tabindex attribute to it. For example:

    <div class="carousel-arrow carousel-right-arrow" tabindex="0" >

Then in your script, you can use jQuery to make pressing Enter on the div trigger the same event as a mouse click:

$('.carousel-arrow').keypress(function (e) {
    if(e.which === 13)
    {
        this.click();
        return false;
    }
});