Swiper JS - Enter 按钮在缩略图上没有任何可访问性

Question

问题：

当按下缩略图上的回车按钮时，我们在滑动滑块上遇到了辅助功能问题，这不会将所选图像带到主图像区域。有什么办法可以让我们按回车键改变滑块的主图像吗？

场景：

我们在我们的网站上设置了滑动器 JS - 滑块 (https://swiperjs.com/)，该滑块与缩略图完美配合。这意味着单击缩略图，在主图像区域显示特定图像。

但是对于可访问性，我正在尝试添加 "tabindex='0'" 和 "role='button'" 以便我可以通过按制表符来聚焦缩略图（这有效）但是按（回车）按钮不会带来在主图像区域上移所选图像。

请参阅下面的 codepen link 和代码示例，您可以看到您可以通过 tab 键浏览缩略图，但在缩略图上按 Enter 键没有任何作用：

演示代码 link:

https://codepen.io/asifkhanlush/pen/oNjvVpG?editors=1111

代码：

HTML:

<body>
    <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
            <div tabindex="0" role="button" class="swiper-slide">
                <div class="swiper-slide-container">Slide 1</div>
            </div>
            <div tabindex="0" role="button" class="swiper-slide">
                <div class="swiper-slide-container">Slide 2</div>
            </div>
            ....
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
            <div tabindex="0" role="button" class="swiper-slide">
                <div class="swiper-slide-container" >Slide 1</div>
            </div>
            <div class="swiper-slide" tabindex="0" role="button">
                <div class="swiper-slide-container">Slide 2</div>
            </div>
            ...
        </div>
</div>

JS:

var galleryTop = new Swiper('.gallery-top', {
    spaceBetween: 10,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    loop: true,
    loopedSlides: 4
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
  spaceBetween: 10,
  centeredSlides: true,
  slidesPerView: 'auto',
  touchRatio: 0.2,
  slideToClickedSlide: true,
      loop: true,
      loopedSlides: 4
});
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;

Answer 1

这是 Swiper (https://github.com/nolimits4web/swiper/issues/4324) 中的一个 bug/missing 功能，但我找到了解决方法。

基本上，将 data-slide-index 添加到所有缩略图并向缩略图元素添加一个 keydown 侦听器：

galleryThumbs.$el.on("keydown", (e) => {
  if (e.keyCode !== 13 && e.keyCode !== 32) return;

  var slideIndex = e.target.dataset.slideIndex;

  if (!slideIndex) return;

  galleryThumbs.slideTo(slideIndex);
  galleryTop.slideTo(slideIndex);
});

这是带有演示的完整代码：https://codesandbox.io/s/swiper-thumbs-gallery-forked-2d1up?file=/index.html。

Swiper JS - Enter 按钮在缩略图上没有任何可访问性

Swiper JS - Enter button doesn't do anything on the thumbnail for accessibility

html

javascript

accessibility

slider

swiper

问题：

场景：

演示代码 link:

代码：