轮播图必须设 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 组合下尤其明显。



















