通过键盘选项卡输入滑块时暂停 SwiperJS 自动播放，无鼠标

Question

我正在处理可访问性请求，并试图在用户通过 Tab 键进入滑块时暂停幻灯片放映。它已经配置为在鼠标悬停时暂停并在鼠标移开时恢复，但当标签进入滑块内的任何元素时它仍然会滑动。

我检查了 SwiperJS 的API，看到了这个：

swiper.autoplay.pause()

但是，当用户通过键盘和标签浏览网站时，我怎么知道滑块何时成为焦点？

我在浏览器控制台中尝试了这些 jQuery 片段，但它们没有暂停幻灯片：

$(window).keyup(function (e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 9 && $('.carousel-wrapper:focus-within').length) {
        swiper.autoplay.pause();
    }
});

$(window).keyup(function (e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 9 && $('.carousel-wrapper:focus-within').length) {
        swiper.autoplay = false;
    }
});

Answer 1

您应该使用

focusin

事件暂停自动播放。

由于确定哪些元素可以准确地获得焦点是非常无用且不可靠的，因此您需要一个事件冒泡到滑块元素，

focusin

就是这样做的。

swiper.el.addEventListener("focusin", () => swiper.autoplay.pause());

ARIA Authoring Practices Guide (APG) 的Carousel pattern 还提到了以下关于自动播放的内容：

如果转盘可以自动旋转，那么它还有：

• 有一个停止和重新开始旋转的按钮。这对于支持辅助技术运行尤为重要 在既不移动键盘焦点也不移动鼠标的模式下。
• 当键盘焦点进入轮播时停止旋转。它不会重新启动，除非用户明确要求它这样做。
• 只要鼠标悬停在旋转木马上就停止旋转。