轮播图必须用 而非 ，因其自带语义，配合 aria-live="polite"、aria-hidden 切换及正确 alt 描述，确保屏幕阅读器可理解；导航按钮须为 ，自动播放默认禁用且需提供暂停机制。
轮播图用 - 还是 ？语义优先选
轮播图必须用 <ul><li></ul>，而不是一堆 <div> 包图片。屏幕阅读器靠语义标签理解内容结构，<code><ul></ul> 自带“列表”含义，会告知用户“这里有若干项，当前第 X 项”，而 <div> 默认无任何语义，你得手动加 <code>role="list" 和 aria-setsize/aria-posinset 才能模拟——但容易漏、易错、维护成本高。
实际写法示例：
-
@@##@@
-
aria-live="polite" 放在 <ul></ul> 上，让屏幕阅读器在切换时播报当前项（如“夏季大促：全场满300减50，第1项，共3项”）
- 每次仅允许一项
aria-hidden="false"，其余必须为 "true"；切图时同步更新这两个属性
- 别用
display: none 隐藏非当前项——它会直接从可访问树中移除，屏幕阅读器完全感知不到
图片 alt 文本怎么写才不算敷衍？
alt 不是“图片1”“banner1”，而是描述图片里**正在发生什么、对用户有什么意义**。轮播图每张图通常承载营销意图，alt 必须包含关键动作和价值点。
- 错误写法：
alt="图片1"、alt="轮播图第一页" —— 屏幕阅读器用户完全不知道这张图想传达什么
- 正确写法：
alt="iPhone 16 Pro 黑色款现货发售，下单立减800元，支持12期免息"
- 如果图含文字（比如促销标语），alt 必须完整复述，不能省略；若图仅为装饰（极少见），才用
alt=""
- 避免在 alt 里写“图片”“图标”等冗余词——
<img src="promo1.jpg" alt="夏季大促：全场满300减50"> 标签本身已表明这是图像
导航按钮和指示点必须是 <button></button>，不是 <div> 或 <code><a></a>
轮播图的上一页/下一页按钮、圆点指示器，必须用原生 <button></button> 标签。它们天生支持键盘聚焦、空格/回车触发、焦点管理，且无需额外 tabindex 或事件监听就能被屏幕阅读器识别为“可操作控件”。
- 错误：
<div class="next-btn">❯</div> —— 默认不可聚焦、不可键盘操作、无 role 提示
- 正确：
<button class="next-btn" aria-label="下一张图片">❯</button>
- 指示点也一样：
<button type="button" aria-label="跳转到第2张图片" aria-pressed="false"></button>，切换时同步更新 aria-pressed
- 绝对不要用
<a href="#"></a> 模拟按钮——会触发页面跳转或锚点滚动，破坏体验
自动播放必须可暂停，且默认禁用
WCAG 2.1 明确要求：任何自动启动且持续超过 5 秒的多媒体内容，必须提供暂停、停止或隐藏机制。轮播图属于典型违规高发区。
- 初始化时，
autoplay 必须关闭（即不设 data-autoplay 或初始设为 false）
- 提供显眼的“暂停轮播”按钮，且该按钮需有
aria-label 和状态反馈（如 aria-pressed="true"）
- 用户首次聚焦任一控制按钮（如上一页）、或鼠标悬停超过 0.5 秒，就应自动暂停——这是防误触的关键
- 别依赖
setTimeout 粗暴轮询；用 clearInterval + 状态标记控制，确保暂停后不再恢复
最易被忽略的是：暂停状态必须持久化到用户交互结束，而不是“鼠标移开就继续播”。这点在移动端尤其重要——手指划过指示点后，轮播不该突然动起来。
![]()
？语义优先选 导航按钮和指示点必须是
![]()
轮播图必须用 <ul><li></ul>，而不是一堆 <div> 包图片。屏幕阅读器靠语义标签理解内容结构，<code><ul></ul> 自带“列表”含义，会告知用户“这里有若干项，当前第 X 项”，而 <div> 默认无任何语义，你得手动加 <code>role="list" 和 aria-setsize/aria-posinset 才能模拟——但容易漏、易错、维护成本高。
实际写法示例：
- @@##@@
-
aria-live="polite"放在<ul></ul>上，让屏幕阅读器在切换时播报当前项（如“夏季大促：全场满300减50，第1项，共3项”） - 每次仅允许一项
aria-hidden="false"，其余必须为"true"；切图时同步更新这两个属性 - 别用
display: none隐藏非当前项——它会直接从可访问树中移除，屏幕阅读器完全感知不到
图片 alt 文本怎么写才不算敷衍？
alt 不是“图片1”“banner1”，而是描述图片里**正在发生什么、对用户有什么意义**。轮播图每张图通常承载营销意图，alt 必须包含关键动作和价值点。
- 错误写法：
alt="图片1"、alt="轮播图第一页"—— 屏幕阅读器用户完全不知道这张图想传达什么 - 正确写法：
alt="iPhone 16 Pro 黑色款现货发售，下单立减800元，支持12期免息" - 如果图含文字（比如促销标语），alt 必须完整复述，不能省略；若图仅为装饰（极少见），才用
alt="" - 避免在 alt 里写“图片”“图标”等冗余词——
<img src="promo1.jpg" alt="夏季大促：全场满300减50">标签本身已表明这是图像
导航按钮和指示点必须是 <button></button>，不是 <div> 或 <code><a></a>
轮播图的上一页/下一页按钮、圆点指示器，必须用原生 <button></button> 标签。它们天生支持键盘聚焦、空格/回车触发、焦点管理，且无需额外 tabindex 或事件监听就能被屏幕阅读器识别为“可操作控件”。
- 错误：
<div class="next-btn">❯</div>—— 默认不可聚焦、不可键盘操作、无 role 提示 - 正确：
<button class="next-btn" aria-label="下一张图片">❯</button> - 指示点也一样：
<button type="button" aria-label="跳转到第2张图片" aria-pressed="false"></button>，切换时同步更新aria-pressed - 绝对不要用
<a href="#"></a>模拟按钮——会触发页面跳转或锚点滚动，破坏体验
自动播放必须可暂停，且默认禁用
WCAG 2.1 明确要求：任何自动启动且持续超过 5 秒的多媒体内容，必须提供暂停、停止或隐藏机制。轮播图属于典型违规高发区。
- 初始化时，
autoplay必须关闭（即不设data-autoplay或初始设为false） - 提供显眼的“暂停轮播”按钮，且该按钮需有
aria-label和状态反馈（如aria-pressed="true"） - 用户首次聚焦任一控制按钮（如上一页）、或鼠标悬停超过 0.5 秒，就应自动暂停——这是防误触的关键
- 别依赖
setTimeout粗暴轮询；用clearInterval+ 状态标记控制，确保暂停后不再恢复
最易被忽略的是：暂停状态必须持久化到用户交互结束，而不是“鼠标移开就继续播”。这点在移动端尤其重要——手指划过指示点后，轮播不该突然动起来。
