和仅表达语义结构，不自动实现交互功能；必须配合tabindex、role、aria-current="step"及js状态同步才能确保可访问性、键盘导航与流程控制准确。
HTML 本身不简化交互逻辑，它只让交互逻辑更可维护、更易对齐业务规则——前提是结构语义准确，且与 JavaScript 控制严格同步。
为什么<ol></ol>或<nav></nav>不能自动实现流程跳转
浏览器不会因为用了<ol></ol>就高亮当前步、禁用后续项，也不会拦截回退操作。常见错误现象包括：点击某一步没反应、键盘无法聚焦、屏幕阅读器读不出“这是第几步”。
-
<ol></ol>只表达顺序关系，不是可交互元素，必须手动加tabindex="0"和role="link" - 仅靠 CSS
::marker显示序号，无法被辅助技术识别，必须配合aria-current="step"和明确的aria-label - 后端返回的状态值（如
"status": "shipped"）要与 DOM 中的data-status严格一致，避免 JS 里硬编码字符串映射
用<nav></nav>+<ol></ol>配合 JS 控制状态流转的关键点
语义结构是前提，JS 是执行者；二者错位会导致无障碍失效、键盘导航断裂、状态不同步。
- 每个流程节点必须是可聚焦元素：
<button></button>或带role="link"的<a></a>，不能是纯<li> -
aria-current="step"必须由 JS 动态写入且唯一：切换前先移除旧的，再设新的，不能只改 class - 禁用非当前节点时，不能只用
pointer-events: none，要同步设aria-disabled="true"和tabindex="-1" - 初始 HTML 必须由服务端渲染出正确的
aria-current="step"位置，否则 JS 初始化阶段就会丢失状态
分支流程（如“已取消”“异常挂起”）怎么保持语义不崩
线性<ol></ol>遇到分支就失效——这不是结构问题，是模型错配。强行塞进有序列表会误导辅助技术，也增加 JS 判断复杂度。
- 主流程仍用
<ol></ol>表达正常路径（待支付 → 已支付 → 配送中 → 已签收） - 分支状态作为独立节点放在
<ul></ul>中，初始设aria-hidden="true"，仅在条件满足时由 JS 插入并设aria-current="step" - 分支节点的
aria-label必须含上下文，例如aria-label="订单已取消,当前步骤"，而非仅“已取消” - 不要用嵌套
<ol></ol>表示子状态（如“配送中”下分“打包→出库→在途”），那属于另一维度流程，应另起<details></details>或独立组件
最容易被忽略的是：服务端渲染生成的初始 HTML 必须包含正确位置的aria-current="step"，否则 JS 初始化阶段就已失焦；而分支节点一旦插入 DOM，就必须立刻参与焦点管理与无障碍树更新——这比视觉显隐复杂得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
