如何通过VoiceOver播报SwiperJS轮播幻灯片内容？

要实现幻灯片进入视野时通过VoiceOver播报内容，同时让导航按钮具备明确的屏幕阅读器反馈，可以按以下步骤处理：

1. 给导航按钮添加ARIA标签 #

先给上一页/下一页按钮补充aria-label，让VoiceOver能识别按钮功能，点击时会直接播报按钮用途：

<button className="swiper-button-prev" aria-label="切换到上一组幻灯片"></button>
<button className="swiper-button-next" aria-label="切换到下一组幻灯片"></button>

2. 利用Swiper切换事件结合ARIA Live区域播报内容 #

ARIA Live区域是屏幕阅读器专门监听的内容区域，当区域内内容更新时会自动触发播报。我们可以创建一个视觉隐藏的Live区域，在幻灯片切换时更新其内容，以此触发VoiceOver播报当前幻灯片信息。

完整修改后的代码： #

import { useRef } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import { Navigation } from 'swiper/modules';

export default function App() {
  const liveRegionRef = useRef(null);

  // 处理幻灯片切换事件
  const handleSlideChange = (swiper) => {
    // 获取当前所有活跃的幻灯片（适配slidesPerView=3的多幻灯片显示场景）
    const activeSlides = Array.from(swiper.slides).filter(slide => slide.classList.contains('swiper-slide-active'));
    // 提取并拼接幻灯片文本内容
    const slideTexts = activeSlides.map(slide => slide.textContent.trim()).join('，');
    // 更新Live区域内容，触发屏幕阅读器播报
    if (liveRegionRef.current) {
      liveRegionRef.current.textContent = `当前显示的幻灯片：${slideTexts}`;
    }
  };

  return (
    <>
      <h1>Swiper test</h1>
      {/* ARIA Live区域：视觉隐藏，仅屏幕阅读器可见 */}
      <div 
        ref={liveRegionRef} 
        aria-live="polite" 
        className="sr-only"
      ></div>
      <div>
        <button className="swiper-button-prev" aria-label="切换到上一组幻灯片"></button>
        <button className="swiper-button-next" aria-label="切换到下一组幻灯片"></button>
        <Swiper
          style={{ width: 900, height: 300 }}
          spaceBetween={20}
          slidesPerView={3}
          navigation={{
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          }}
          modules={[Navigation]}
          onSlideChange={handleSlideChange}
        >
          <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>
    </>
  );
}

补充说明： #

• aria-live="polite"：表示屏幕阅读器会在当前用户操作完成后播报更新内容，不会打断用户流程。
• sr-only类需要搭配以下CSS，实现元素视觉隐藏但保持屏幕阅读器可访问：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

• 代码适配了slidesPerView={3}的多幻灯片场景，会同时播报所有当前可见的幻灯片内容；如果是单张幻灯片切换的场景，可简化逻辑为只取第一个活跃幻灯片的文本。

内容的提问来源于stack exchange，提问作者user4617883