轮播图必须设 role="region" 并配唯一具体 aria-label，如“首页推荐商品轮播”；aria-live 区域需设 aria-atomic="true" 和 aria-relevant="additions text"；控制按钮须含 aria-controls、语义化 aria-label 及 aria-disabled="true"；焦点须随切换落至当前 slide 首个可聚焦元素。
轮播图必须加 role="region" 且带唯一 aria-label
不加这个，屏幕阅读器根本不知道这是个可交互的轮播区域，会直接跳过或当成普通内容朗读。很多开发者只加 aria-live，但没声明区域角色，导致语义断裂。
正确做法是把整个轮播容器设为 role="region"，并用有意义的 aria-label 描述用途，比如：aria-label="首页推荐商品轮播"。避免用“轮播图”“幻灯片”这类无上下文的词。
-
role="region"是必需的，不能用role="group"或省略 -
aria-label必须唯一、具体，同一页面多个轮播要区分（如“顶部横幅”“商品推荐”） - 不要用
aria-labelledby指向一个隐藏标题再绕一圈——增加冗余，部分 NVDA 版本解析不稳定
aria-live 只能用于自动切换时的内容区，且必须配 aria-atomic 和 aria-relevant
轮播自动翻页时，新 slide 内容要被屏幕阅读器及时朗读，靠的就是 aria-live。但单独加 aria-live="polite" 不够——它默认只读文本变化，而轮播常含图片、按钮、链接混合更新。
必须同时设置：
-
aria-live="polite"（禁止用"assertive"，否则打断用户操作） -
aria-atomic="true"：确保整张 slide 内容作为整体朗读，而不是只读变更部分（比如只读新图片 alt，漏掉标题） -
aria-relevant="additions text"：明确告诉阅读器“新增内容”和“文本变化”都要响应，忽略removals（删旧 slide 不需要朗读）
注意：aria-live 区域必须是轮播内容容器（即每张 slide 的外层），不是整个轮播 wrapper；且该容器不能有 tabindex="-1" 或 inert，否则阅读器无法聚焦感知。
手动切换按钮必须含 aria-controls + aria-label，禁用状态要同步 aria-disabled="true"
“上一张”“下一张”按钮如果只有图标没文字，又没正确 ARIA 标注，视障用户完全不知道功能，也无法知道当前是否禁用（比如第一张时“上一张”不可点）。
- 每个控制按钮必须用
aria-controls="id-of-slides-container"关联到轮播内容区 ID -
aria-label要说明动作+目标，如aria-label="切换至上一张推荐商品"，而非仅“上一页” - 禁用时：用
aria-disabled="true"+disabled属性双写（部分阅读器只认前者，部分只响应后者） - 禁止用
visibility: hidden或display: none隐藏禁用按钮——这会让阅读器彻底丢失控件
焦点管理不是可选项：自动轮播暂停后，tab 进入必须落到当前 slide 的首个可聚焦元素
用户按 Tab 进入轮播时，焦点若落在轮播 wrapper 上（无 tabbable 子元素），就会卡住；若落在按钮上但不是当前 slide 的内容，语义就错乱了。
实操关键点：
- 轮播 wrapper 自身不设
tabindex；所有可聚焦元素（按钮、链接、输入框）都在 slide 内部 - 每次切换 slide 后，用 JavaScript 主动
.focus()到当前 slide 中第一个可聚焦元素（通常是主标题链接或 CTA 按钮） - 自动轮播必须支持
prefers-reduced-motion检测，并在用户开启“减少动画”时默认暂停；也要提供显式“暂停/播放”按钮（带aria-pressed状态）
最易被忽略的是：当用户用键盘操作“下一张”后，焦点没跟过去，而是留在原按钮上——这意味着他得再按两次 Tab 才能读到新内容，体验断裂。这点在移动端 VoiceOver + Safari 组合下尤其明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
