轮播图可访问性需确保键盘和屏幕阅读器用户能感知状态、控制流程、不被中断，关键在自动播放控制与焦点管理。
轮播图的可访问性不是“加几个 aria- 属性就完事”，而是必须让键盘用户、屏幕阅读器用户能感知状态、控制流程、不被中断。自动播放和焦点管理是其中最容易出问题的两个环节。
用 role="region" 和 aria-label 定义轮播区域
轮播不能只是个普通 <div>，否则屏幕阅读器根本不知道这是个独立交互区域。必须明确语义：
-
<div class="carousel" role="region" aria-label="产品展示轮播">—— 这是基础，role="region"告诉辅助技术“这里是一块可聚焦的动态内容区”，aria-label提供上下文 - 避免用
aria-labelledby指向一个隐藏标题，除非那个标题本身对所有用户都有意义；否则直接写明用途更可靠 - 如果轮播内有主标题（比如
<h2>今日新品</h2>），优先用aria-labelledby关联它，比纯文本 label 更自然
tabindex="0" + aria-live 控制焦点与状态播报
轮播切换时，屏幕阅读器默认不会主动读新内容。必须靠 aria-live 触发播报，但方式很关键：
- 给轮播内容容器（如
<div class="carousel-slide">）加aria-live="polite" aria-atomic="true"—— “polite” 表示不打断当前语音，“atomic” 确保整张幻灯片作为一句读出，而不是只读变化的部分 - 每次切换后，手动调用
element.focus()到当前显示项（比如carousel-item.active），并确保该项有tabindex="0"—— 否则键盘用户 Tab 进来时可能落在按钮上却看不到内容更新 - 别把
aria-live加在按钮或指示器上：它们只触发动作，不承载内容；播报对象必须是实际展示内容的容器
自动播放必须可暂停，且暂停状态要持久
自动播放对认知障碍用户极不友好，WCAG 明确要求：必须提供暂停/恢复控件，且默认不自动播放（除非用户明确开启）。
立即学习“前端免费学习笔记（深入）”；
- 初始化时不要调用
setInterval；等用户点击“播放”按钮或显式调用startAutoPlay()才启动 - 暂停按钮必须是
<button type="button">，带aria-label="暂停轮播"或aria-pressed="false"（按下去后改为true），让屏幕阅读器知道当前状态 - 鼠标悬停暂停（
mouseenter）只是辅助，不能替代显式控件；键盘用户无法触发 hover，所以必须有可聚焦、可回车触发的按钮 - 页面失去焦点（如切到其他 tab）时，自动播放应暂停；切回来不自动恢复 —— 用户可能已离开，不应突然开始播报
箭头按钮和指示器的键盘支持不能只靠 click
很多实现只监听 click，结果键盘用户按空格/回车没反应，或者焦点卡住不动。
- 用原生
<button>，别用<div role="button">—— 前者自带空格/回车触发、焦点管理、aria-disabled支持 - 左右按钮需加
aria-label="上一张" / "下一张"，指示器用<button aria-label="跳转到第3张图片">，不要只写“3” - 指示器按钮要按顺序
tabindex可达，并在激活后把焦点移回当前轮播项，避免焦点丢失在一堆点里 - 禁用状态（如首张时“上一张”变灰）必须同步设
disabled属性和aria-disabled="true"，否则键盘用户仍能触发
最常被忽略的一点：轮播内容切换时，如果用了 opacity 或 transform 动画，就绝不能用 display: none 隐藏非当前项——这会让屏幕阅读器完全跳过那些元素，导致“只读第一张”。应该用 visibility: hidden 或 aria-hidden="true" 配合视觉隐藏，同时保持 DOM 可访问性。
