应使用语义化 ul 包裹 li 作为指示点，每个 li 添加 role="button"、tabindex="0" 和 aria-current="true"（当前项），禁用 display: none 隐藏，css 用 ::before 控制形状并分离状态样式，js 统一维护 currentindex 同步轮播与指示点状态，并完善键盘导航（arrowleft/right、enter/space）及暗色模式适配。
怎么用 ul + li 做指示点 DOM 结构
指示点本质就是一组可点击的视觉标记，最稳妥的做法是用语义清晰、无障碍友好的 ul 包裹 li，每个 li 对应一张图。不要用 div 堆砌或纯 CSS 伪元素生成——那样无法被屏幕阅读器识别，也难绑定事件。
关键点：
-
li必须带role="button"和tabindex="0"，否则键盘用户无法聚焦操作 - 给当前激活的
li加aria-current="true"，方便辅助技术感知位置 - 避免在
li里再套button——会导致嵌套交互控件，触发两次 click 或 focus 行为 - 结构示例：
怎么用 CSS 控制指示点样式和状态切换
指示点默认是小圆点，但很多人直接用 border-radius: 50% + background，结果在高缩放或暗色模式下对比度不足。更可靠的方式是用 ::before 伪元素控制形状，并通过 background-color 和 opacity 分离“启用/禁用”状态。
常见坑：
- 没设
width/height或min-width，导致空li在某些浏览器中不占空间，点击失效 - 用
display: none隐藏非激活点——这会让屏幕阅读器跳过，应改用visibility: hidden+position: absolute或仅调低opacity - 过渡动画写成
all 0.2s，可能意外触发动画重排；推荐只写background-color 0.2s, opacity 0.2s - 暗色模式适配：用
color-scheme: light dark或媒体查询配合prefers-color-scheme调整背景色
怎么用 JavaScript 同步轮播图和指示点状态
核心逻辑不是“点哪个就跳哪”，而是“图切到第几张，就激活第几个指示点”。否则手动点击后，自动轮播再切图时状态就脱节了。
实操要点：
- 维护一个
currentIndex变量，所有切换（自动、箭头、指示点）都走同一套更新逻辑 - 指示点点击事件里别直接调
goTo(index)，而是先e.preventDefault()，再触发统一的状态变更函数 - 用
querySelectorAll(".carousel-indicators li")获取全部点，用forEach遍历并根据data-index设置aria-current和 class - 别忘了在自动轮播的
setInterval里也同步更新指示点——否则定时器切图后，底部点还停在上一个 - 如果轮播图支持循环（
loop: true），注意currentIndex溢出时要取模：currentIndex = (currentIndex + 1) % slides.length
为什么 focus 和 keydown 处理不能省
指示点不是装饰，是导航控件。用户按 Tab 进入后，必须能用 ←/→ 键左右切换，按 Enter 或 Space 确认跳转——这是 WCAG 2.1 的强制要求。
具体怎么做：
- 给每个
li绑定keydown事件，判断e.key是"ArrowLeft"还是"ArrowRight"，然后更新currentIndex -
Enter和Space触发相同行为，但Space要e.preventDefault()，否则会触发页面滚动 - 每次焦点移到新
li时，用scrollIntoView({ block: 'nearest', inline: 'center' })让它居中显示，尤其当指示点数量多、容器有横向滚动时 - 别监听整个
ul的键盘事件——那样无法区分焦点在哪一个li上，要用事件委托 +e.target判断
指示点看着简单，但真正做到可用、可访问、不脱节，关键在状态同步时机和键盘交互细节。最容易被忽略的是：自动轮播触发后，是否真的更新了 aria-current 和焦点管理；还有暗色模式下，那个灰扑扑的“当前点”是不是已经看不见了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
