html仅提供流程的静态骨架，动态状态流转、条件分支和用户响应必须由javascript实现；和无法自动驱动流程，需结合aria-current、data-*属性、js校验与服务端渲染协同保障可访问性与业务逻辑。
HTML 本身不能定义应用逻辑流程，它只负责用语义化标签表达「流程的静态骨架」；真正的状态流转、条件分支、用户干预响应，必须由 JavaScript 实现。
为什么<ol></ol>和<nav></nav>无法自动驱动流程
很多人把订单步骤写成<ol></ol>就以为完成了流程控制，其实浏览器不会因为用了<ol></ol>就自动高亮当前步、禁用后续项或拦截非法跳转。
- 点击某一项没反应？——
<li>默认不可聚焦，没加tabindex="0"，键盘和屏幕阅读器都访问不到 - 用户点“已发货”想退回“待支付”？——
<ol></ol>不校验业务规则，得靠 JS 判断status字段值并动态禁用 - 屏幕阅读器读不出“这是第几步”？——仅靠 CSS
::marker不行，必须配合aria-current="step"和明确的aria-label
用data-属性对齐后端状态与 DOM 节点
服务端返回的status: "shipped"要能被 JS 快速映射到对应 DOM 节点，关键不是硬编码字符串匹配，而是靠结构化属性对齐。
- 每个流程节点加
data-status="shipped"，JS 初始化时直接查document.querySelector('[data-status="shipped"]') - 避免写
if (status === 'shipped') { el.classList.add('active') }这类散落判断，改用统一查找+统一设aria-current - 注意
dataset大小写转换规则：HTML 中data-api-url在 JS 里是el.dataset.apiUrl，但含数字开头（如data-2fa-enabled）必须用getAttribute()
分支流程（如“已取消”）怎么保持语义不崩
线性<ol></ol>遇到异常分支就失效。强行塞进有序列表会误导辅助技术，也增加 JS 判断复杂度。
- 主流程仍用
<ol></ol>：待支付 → 已支付 → 配送中 → 已签收 - 分支节点（如“已取消”）放在独立
<ul></ul>里，初始加aria-hidden="true"隐藏 - 触发条件满足时（如后端返回
status: "cancelled"），JS 动态移除aria-hidden，并设aria-current="step" - 分支节点的
aria-label必须带上下文，例如aria-label="订单已取消，当前步骤"，不能只写“已取消”
最容易被忽略的是服务端渲染时生成的初始 HTML —— 必须包含正确位置的aria-current="step"，否则 JS 初始化阶段就得做一次 DOM 查找+重写，既慢又容易漏掉可访问性关键信息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
