如何使Owl Carousel键盘可访问

Question

根据Web Content Accessibility Guidelines，为了使网站可以被访问，您应该能够使用键盘来获取内容的所有功能：

  

内容的所有功能都可通过键盘操作   接口

我正在使用猫头鹰旋转木马2，并添加箭头并将其链接如下：

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

但是使用键盘无法访问这些箭头，只能使用鼠标。 我怎样才能使它们可以访问？

Answer 1

首先，为了通过键盘访问div，您需要为其添加tabindex属性。例如：

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

然后在你的脚本中，你可以使用jQuery在div触发器上按Enter键，鼠标点击同样的事件：

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