html本身不实现逻辑流转控制，仅提供语义化骨架；复杂流程需javascript动态操控aria-current、data-status和焦点行为，ol或nav标签不会自动高亮当前步、禁用后续项或拦截非法回退。
HTML 本身不实现逻辑流转控制，它只提供可被 JavaScript 驱动的语义化骨架；所谓“复杂流程”，必须靠 JS 操控 aria-current、data-status 和焦点行为来落地，结构只是让这套控制不崩、不盲、不卡。
为什么不能靠 ol 或 nav 自动跳转
浏览器不会因为用了 ol 就高亮当前步、禁用后续项，也不会因写了 nav 就自动拦截非法回退。常见错误现象包括：点击某一步没反应、键盘 Tab 跳过整个流程、屏幕阅读器只读出“列表项 2”，却不提“这是‘已支付’步骤”。
- 默认
li不可聚焦，必须加tabindex="0"才能被键盘和读屏器识别 -
aria-current="step"必须由 JS 动态写入且唯一——切换时先移除旧的，再设新的，不能只改 class - 仅靠 CSS
::marker显示序号，对辅助技术无效；必须配合aria-label，例如aria-label="已支付，当前步骤"
fieldset 分组如何支撑多状态表单流转
fieldset 的核心价值不是画框，而是提供原生的批量禁用、焦点隔离与语义锚点；在“填写→审核→提交→完成”这类状态驱动的表单中，它能让 JS 控制更稳、更少出错。
- 每组必须以
legend开头，且不能为空；视觉隐藏要用sr-only类，别用display: none或aria-label替代 -
disabled属性会向下传递，但只作用于直属后代；若中间插了div包裹input，禁用就会断掉 - 收起/展开不能用
display: none，否则读屏器直接跳过整组；应配合inert+aria-expanded+max-height过渡
分支流程（如“已取消”“异常挂起”）怎么保持语义不乱
线性 ol 天然不支持分支，硬塞进去只会让辅助技术误判主流程，也让 JS 判断逻辑变臃肿。正确做法是主干归主干，分支归分支，靠 JS 动态注入与状态对齐。
- 主流程用
ol：待支付 → 已支付 → 配送中 → 已签收 - 分支节点（如“已取消”）放在独立
ul中，初始带aria-hidden="true" - 后端返回
status: "cancelled"时，JS 移除aria-hidden，并设aria-current="step" - 分支节点的
aria-label必须含上下文，例如aria-label="订单已取消，当前步骤"，不能只写“已取消”
最易被忽略的是服务端渲染生成的初始 HTML —— 必须包含正确位置的 aria-current="step"，否则 JS 初始化阶段要额外 DOM 查找、重写、同步焦点，既慢又容易漏掉无障碍关键信息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
