轮播图必须用语义化HTML结构实现可访问性：每张幻灯片用<div class="slide">包裹<img>和<figcaption>或<p>，图片带alt属性；容器加aria-live="polite"，每张slide加role="group"和aria-label；用transform切换而非display:none；JavaScript需同步更新焦点与aria-hidden状态。
轮播图结构必须用 <div> 包裹，不能只靠 <img> 切换
纯图片切换会丢失文字语义，搜索引擎和屏幕阅读器无法识别描述内容。文字描述必须作为独立 HTML 元素存在，和对应图片在同一个逻辑“幻灯片”容器里。常见错误是把文字写在轮播容器外部、或用 CSS content 伪元素生成——这两者都不被 DOM 解析为可访问内容。
- 每张幻灯片用一个
<div class="slide">包住<img>和<p>（或<figcaption>） - 文字用
<p>或语义更明确的<figcaption>，不要用<span>或<div>无意义包裹 - 图片必须带
alt属性，即使已有文字描述，alt仍需简明表达图像核心信息（例如alt="咖啡杯特写，蒸汽上升"）
aria-live 和 aria-label 不是可选项，是文字轮播的强制要求
当自动切换发生时，仅靠视觉变化无法通知屏幕阅读器当前展示的是哪张图及其描述。不加 ARIA 属性，视障用户会完全错过文字内容更新。
- 轮播容器加
aria-live="polite"，确保文字变更时被朗读 - 每个
<div class="slide">加role="group"和aria-label（例如aria-label="第1页：手冲咖啡步骤说明"） - 切换时动态更新当前 slide 的
aria-hidden="false"，其余设为aria-hidden="true"
用 CSS transform 实现切换，别用 display: none
display: none 会让屏幕阅读器直接跳过整个 slide，文字描述彻底失效。即使你加了 aria-hidden="false"，DOM 中不可见元素仍可能被忽略。
- 所有 slide 默认用
position: absolute叠放，通过transform: translateX()控制显隐 - 当前 slide 设
transform: translateX(0)，上一张设translateX(-100%)，下一张设translateX(100%) - 切换动画用
transition: transform 0.4s ease，避免卡顿影响语义流
JavaScript 切换逻辑要同步更新 tabindex 和焦点
键盘用户依赖 Tab 进入轮播，按 ArrowRight 切换。如果焦点没落到当前 slide 内，或者文字区域不可聚焦，他们就无法阅读或操作。
立即学习“前端免费学习笔记（深入）”；
- 轮播容器设
tabindex="0"，首次Tab可进入 - 每次切换后，调用
currentSlide.focus()（需给currentSlide设tabindex="-1"） - 监听
keydown，对ArrowLeft/ArrowRight做手动切换，避免依赖浏览器默认行为
文字描述不是装饰，是轮播功能的一部分。很多人做完视觉切换就停了，但真正的完成点是：键盘用户能 Tab 进入、用方向键切换、听到每张图的文字说明，并且不因动画或隐藏逻辑中断阅读流。
