javascript - 如何使 Owl Carousel 键盘易于访问

Question

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

内容的所有功能都可以通过键盘界面进行操作

我正在使用 Owl Carousel 2，并添加了箭头并将它们链接起来，如下所示：

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

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

Answer 1

首先，为了使 adiv可以通过键盘访问，您需要为其添加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;
    }
});