纯 html 无法实现带进度指示的多步骤表单，必须用 javascript 控制步骤状态、显隐切换、数据暂存和 同步； 仅渲染数值，不参与逻辑，需 js 维护 currentstep 并更新其 value，语义化步骤条应使用 + aria-current="step"，字段需通过 aria-describedby 关联当前步骤并手动管理焦点。
纯 HTML 无法实现带进度指示的多步骤表单，必须用 JavaScript 控制步骤状态、显隐切换、数据暂存和 <progress></progress> 同步——CSS 只负责样式，<progress></progress> 只负责数值渲染，逻辑全在 JS 里。
为什么不能只靠 <progress></progress> 标签
<progress></progress> 是个“哑巴”元素：它不感知步骤、不响应点击、不校验字段，只按 value 和 max 画一根线。常见错误是写死 <progress value="1" max="4"></progress>，切步时不更新 value，结果进度条永远停在第一步。
- value 必须是数字（如
2），不能是字符串"2"，否则部分浏览器失效 - 别用
<progress></progress>判断当前在哪步——JS 里另维护一个currentStep变量，<progress></progress>只读取它来渲染 - 语义上，
<progress></progress>表示「任务完成百分比」，不是「第几步 / 共几步」；屏幕阅读器会朗读“进度 50%”，而非“步骤 2，共 4 步”
用 <ol></ol> + aria-current="step" 做真正语义化的步骤条
这才是 WCAG 推荐做法：<ol></ol> 天然表达顺序，aria-current="step" 明确告诉辅助技术“这是当前项”。所有视觉样式都由 CSS 伪元素控制，不依赖图片或内联样式。
- 每个步骤用
<li>，当前项加aria-current="step"，其他不加 - 序号用
counter-reset+::before { content: counter(step) }自动生成，避免硬编码 - 连线用相邻兄弟选择器（
li + li::before）画，颜色由前一项状态决定：如果前一项有class="step--done"，就设background-color: #4caf50 - 别用
opacity区分状态——改color和border-color，确保高对比度模式可用
JS 更新步骤时最容易漏掉的两件事
JS 不是只改一个 class 就完事。实际项目中，UI 错乱往往源于边界没控住。
- 用户狂点“下一步”，没防重复操作：每次更新前先清空所有状态，
document.querySelectorAll('.step').forEach(el => el.classList.remove('step--done', 'step--active')) - 后退到上一步，没清掉后续所有
.step--done：比如从第 4 步退回第 2 步，第 3、4 步的.step--done必须移除，否则视觉与逻辑错位 - stepIndex 越界（
或 <code>>= steps.length）直接return，不操作 DOM - 如果支持跳转（非线性），要同步中间步骤状态：不能只设目标项为
.step--active，还得把路径上的所有中间项设为.step--done
表单字段怎么关联当前步骤语义
用户聚焦邮箱输入框时，屏幕阅读器应立刻告知“你正在填写第 2 步：联系信息”，而不是让用户自己回头找进度条。
- 每个步骤容器（如
<li id="step-2">）加aria-label="步骤 2:联系信息" - 该步骤下的主字段（如
<input id="email">）绑定aria-describedby="step-2" - 切换步骤后，记得更新对应字段的
aria-describedby指向，不能复用同一段描述文本 - 别把整个进度条的 ID 塞进所有字段的
aria-describedby，否则每次聚焦都重复朗读全部步骤
最易被忽略的是焦点管理：点击“下一步”后，焦点常丢失或回到页面顶部，屏幕阅读器用户瞬间迷失位置。必须手动 focus() 到新步骤的第一个可交互元素，或至少用 scrollIntoView({ block: 'nearest' }) 确保可视。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
