如何使 Owl Carousel 键盘易于访问答案

【问题标题】：How to make Owl Carousel keyboard accessible如何使 Owl Carousel 键盘易于访问
【发布时间】：2016-11-23 20:56:32
【问题描述】：

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

内容的所有功能均可通过键盘操作界面

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

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

但是这些箭头不能使用键盘访问，只能使用鼠标。如何使它们易于访问？

【问题讨论】：

【解决方案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;
    }
});

【讨论】：

更好的是，只需使用 BUTTON 并根据需要设置样式 - BUTTON 开箱即可完全通过键盘访问。
@BrendanMcK 感谢您提供更好的解决方案。唯一的缺点是风格。
一定要使用<button>，它同时支持Enter键和Space键，所以请务必同时监听第32个字符。至于样式，<button> 可以像任何其他元素一样设置样式，所以这绝不是不使用它的理由。