如何用VoiceOver播报SwiperJS幻灯片内容？

Question

我正在使用 SwiperJS React 组件，并希望在使用 VoiceOver 看到幻灯片内容时宣布它们。有没有办法做到这一点？现在，用户在单击下一个或上一个按钮时不会听到任何反馈。

这是一个非常简单的 React 应用程序的代码：

export default function App() {
  return (
    <>
      <h1>Swiper test</h1>
      <div>
        <button className="swiper-button-prev"></button>
        <button className="swiper-button-next"></button>
        <Swiper
          style={{ width: 900, height: 300 }}
          spaceBetween={20}
          slidesPerView={3}
          navigation={{
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          }}
        >
          <SwiperSlide>Slide 1</SwiperSlide>
          <SwiperSlide>Slide 2</SwiperSlide>
          <SwiperSlide>Slide 3</SwiperSlide>
          <SwiperSlide>Slide 4</SwiperSlide>
          <SwiperSlide>Slide 5</SwiperSlide>
          <SwiperSlide>Slide 6</SwiperSlide>
        </Swiper>
      </div>
    </>
  );
}

Answer 1

Swiper 有一个专门用于辅助功能和屏幕阅读器的完整模块。 https://swiperjs.com/swiper-api#accessibility-a11yhttps://swiperjs.com/swiper-api#accessibility-a11y

也检查一下这个游乐场：

https://codepen.io/sdw5/pen/OJmxWYR

如果您在使用 Tab 键导航时检查页面会更容易。 注意轮播结构底部的 div 元素：

<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>

这就是触发画外音屏幕阅读器的原因