html仅提供流程静态骨架，交互控制必须由js实现；ol和nav无自动跳转能力，需js配合aria-current、tabindex等确保可访问与状态同步。
直接说结论：HTML 本身不定义交互逻辑，它只负责用语义化结构表达「流程的静态骨架」；真正的交互流程控制必须由 JavaScript 实现，但 HTML 的结构质量决定了 JS 控制是否清晰、可维护、无障碍可用。
为什么不能靠 <ol></ol> 或 <nav></nav> 自动实现流程跳转
很多人误以为把订单状态写成 <ol></ol> 就等于实现了“流程”，其实 <ol></ol> 只表达顺序关系，不带任何行为能力。浏览器不会因为用了 <ol></ol> 就自动帮你高亮当前步、禁用后续项、或拦截回退操作。
- 点击某一步没反应？—— 因为
<li>默认不是可交互元素，没加tabindex="0"也无法键盘聚焦 - 用户点了“已支付”想跳回“待支付”？——
<ol></ol>不限制跳转逻辑，得靠 JS 判断业务规则（比如“已支付后不可退回”）并禁用对应项 - 屏幕阅读器读不出“这是第几步”？—— 仅靠视觉序号（如 CSS
::marker）不够，必须配合aria-current="step"和明确的aria-label
用 <nav></nav> + <ol></ol> 搭配 JS 控制状态流转的关键点
语义结构是前提，JS 是执行者。二者要严格对齐，否则结构再规范也白搭。
- 每个流程节点必须是
<a></a>或带role="link"的可聚焦元素，否则无法被键盘/屏幕阅读器访问 -
aria-current="step"必须由 JS 动态写入且唯一：切换时先移除旧的，再设新的，不能只改 class - 禁用非当前可操作节点时，不要只用
pointer-events: none，要同步加aria-disabled="true"和tabindex="-1" - 后端返回的状态字段名（如
"status": "shipped"）应与 DOM 中某个data-status值严格一致，避免 JS 里写死字符串映射
遇到分支流程（如“异常挂起”“已取消”）怎么保持语义不崩
线性 <ol></ol> 遇到分支就失效——这不是结构问题，是模型错配。强行塞进有序列表会误导辅助技术，也增加 JS 判断复杂度。
- 主流程仍用
<ol></ol>表达正常路径（待支付 → 已支付 → 配送中 → 已签收） - 分支状态（如“已取消”“异常挂起”）作为独立节点放在
<ul></ul>中，用aria-hidden="true"隐藏，仅在触发条件满足时由 JS 插入并设aria-current="step" - 不要用嵌套
<ol></ol>表示子状态（如“配送中”下分“打包→出库→在途”），那属于另一个维度的流程，应另起<details></details>或独立组件 - 所有分支节点的
aria-label必须包含上下文，例如aria-label="订单已取消，当前步骤"，而非仅“已取消”
最常被忽略的是：服务端渲染时生成的初始 HTML 必须包含正确位置的 aria-current="step"，否则 JS 初始化阶段会出现“闪动”或无障碍断层。结构和状态必须从第一帧就对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
