辅助功能：如何通过 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

check this playground as well: https://codepen.io/sdw5/pen/OJmxWYR

would be easier if you inspect the page while navigating with Tab key. Notice a div element at the bottom of the carousel structure:
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>

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