轮播图必须设role="region"并配唯一aria-label，幻灯片用role="group"加aria-roledescription="slide"，切换按钮需含type="button"、aria-label和aria-controls，自动播放须提供暂停/恢复控件且默认静止。
轮播图必须有 role="region" 且带唯一 aria-label
屏幕阅读器默认不把轮播容器识别为有意义的区域，不加语义角色会导致用户完全跳过它。只用 div 包裹是无效的，必须显式声明 role="region"，并配一个描述性 aria-label（比如 aria-label="首页推荐商品轮播"）。不能用 aria-labelledby 指向一个不可见或动态变化的标题——万一标题被 display: none 或 visibility: hidden 隐藏，标签就失效了。
常见错误：
– 写成 role="carousel"（WAI-ARIA 1.2 中该 role 已废弃，不被主流读屏支持）
– aria-label 留空或写成“轮播图”这种无意义泛称
– 容器用了 aria-hidden="true" 却没同步处理焦点逻辑
每张幻灯片要包裹在 role="group" 里并声明 aria-roledescription
单张幻灯片不是独立组件，而是轮播区域内的子单元。直接给 img 或 section 加 role="article" 或 role="figure" 是错的——它们会破坏父子关系，让屏幕阅读器误判结构层级。正确做法是：每张幻灯片外层用 div role="group"，并添加 aria-roledescription="slide"（注意不是 aria-label），这样 VoiceOver 和 NVDA 才能读作“第2张幻灯片”。
实操要点：
– role="group" 必须直接包住幻灯片全部内容（图文、按钮、描述文本）
– aria-roledescription 值建议固定用英文 "slide"，中文读屏对自定义中文描述支持不稳定
– 不要给同一张幻灯片重复加多个 role（如同时写 role="group" role="img"）
左右切换按钮必须含 aria-controls + aria-label + 显式 type="button"
按钮缺 type="button" 在表单内会触发表单提交；缺 aria-controls 就无法建立“按钮 → 轮播容器”的操作关联；缺 aria-label 则读屏只报“按钮”，用户不知道功能。这三个属性缺一不可。
示例写法：
<button type="button" aria-label="上一张" aria-controls="hero-carousel"></button>
注意：
aria-controls 的值必须严格等于轮播容器的 id（如 id="hero-carousel"），大小写和连字符都不能错。如果轮播是 JS 动态生成的，确保 ID 在插入 DOM 时已存在且不重复。
容易踩的坑：
– 用 <a href="#"></a> 代替 button，导致键盘 Tab 焦点进入后按回车两次才触发（第一次跳转，第二次才执行 JS）
– aria-label 写成“点击切换”，没说明方向（应为“上一张”或“下一张”）
– 按钮被 CSS 设置 pointer-events: none 但未同步设 disabled 或 aria-disabled="true"，读屏仍可聚焦并宣布“可用”
自动播放必须提供暂停/恢复控件，且禁用 autoplay 属性
HTML <video></video> 或 <audio></audio> 的 autoplay 属性本身不违反无障碍，但轮播图用 JS 实现自动播放时，若没提供手动暂停方式，就违反 WCAG 2.2.2（暂停、停止、隐藏）。关键不是“能不能播”，而是“用户能否随时中断”。
实操底线：
– 页面加载后轮播默认静止（即不自动启动定时器）
– 必须提供可见、可聚焦、可操作的“暂停轮播”按钮（aria-label="暂停轮播"）
– 按钮状态需实时同步：暂停时按钮显示“恢复轮播”，aria-pressed="true"；运行时为 aria-pressed="false"
– 自动播放间隔 ≥ 5 秒，否则键盘用户来不及操作控件
别依赖 prefers-reduced-motion 媒体查询自动停播——它只是辅助选项，不能替代显式控件。很多低视力用户需要动画来理解切换逻辑，但需要自己掌控节奏。
最常被忽略的一点：轮播图的 tabindex 应该只落在可交互元素上（按钮、指示器），不要给幻灯片容器设 tabindex="0"。否则键盘用户会卡在空白区域，却找不到任何可操作内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
