HTML步骤条本身不提供流程引导能力，仅是视觉容器；所有流程控制（如跳步拦截、表单校验、状态同步、URL维护、无障碍支持）必须由JavaScript主动实现。
HTML步骤条本身不影响流程引导，它也不提供任何流程引导能力——它只是个视觉容器。 你加了 <ol class="steps">，浏览器不会因此阻止用户跳步、不会校验表单、也不会同步 URL 或状态。所有流程控制逻辑必须由 JavaScript 主动实现。
为什么纯 HTML 步骤条不能替代流程控制
常见错误现象：用户点击第 4 步，页面直接跳转到对应内容，但第 2 步的邮箱字段还是空的；刷新后步骤高亮丢失；屏幕阅读器读不出“当前在步骤3”。
-
<ol>只表达顺序，不表达状态——aria-current="step"必须手动添加/移除 - 浏览器对
aria-disabled="true"不做事件拦截，仍需在onclick中preventDefault() - 步骤条不监听表单输入，
validateStep2()这类校验函数得你自己调用，且必须返回布尔值决定是否放行 - URL 路径（如
/setup/step3）和 DOM 状态不同步时，刷新即失焦——需用history.pushState()+popstate事件维持
哪些场景必须用 JS 控制步骤流转
当业务逻辑存在强依赖时，JS 不是“可选增强”，而是必要基础设施。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 多步注册表单：第 2 步依赖第 1 步生成的 token，跳过则接口 400
- 安装向导：某步勾选“启用 HTTPS”会动态展开第 4 步配置项，DOM 结构变化需重算步骤总数
- 支付流程：用户点“上一步”时，需清空后续步骤已填数据（如第 4 步的银行卡号），否则下次提交可能带脏数据
- 离线优先应用：步骤状态要存入
localStorage，断网刷新后仍能恢复到上次离开的位置
容易被忽略的 aria 属性维护细节
aria-current 和 aria-disabled 不是贴个标签就完事，它们必须与真实交互状态严格一致。
立即学习“前端免费学习笔记（深入）”；
- 仅给当前步骤加
aria-current="step"，其他步骤**不能**写aria-current="false"（无效值） - 禁用某步时，除了
aria-disabled="true"，还得加tabindex="-1"并移除焦点，否则键盘用户仍可 Tab 进去 -
aria-label建议动态拼接，例如"步骤2：验证邮箱，已完成"，而不是静态写死"步骤2" - 每步切换后，立即用
document.querySelector('[aria-current="step"]').scrollIntoView({ block: "nearest" })确保焦点可见
最常被跳过的其实是「后退」路径的副作用处理：用户点上一步，UI 高亮变了，但第 3 步的 input 值还留在内存里，下一次点“下一步”可能把旧数据又提交了。这种隐性状态不显式清理，步骤条再符合 WCAG 也是空中楼阁。
