分步导航必须用而非+，因流程具线性顺序且非跳转链接；当前步须加aria-current="step"，其余步骤禁用href并用data-status等属性标识状态，确保屏幕阅读器准确播报“当前步骤”而非可点击链接。
分步导航（流程指示条）不是普通导航栏，它不跳转页面，而是表达“当前处在第几步”，必须用语义化结构 + 明确的视觉状态 + 可访问性标注，否则屏幕阅读器会误读为链接列表。
为什么不能直接套用 <nav></nav> + <ul></ul> 做流程条
常见错误是把流程条写成：<nav><ul><li><a href="#">步骤1</a></li></ul></nav>。这会让读屏器播报“导航区域，链接，步骤1”，用户误以为能点击跳转。实际流程条中，只有当前步可交互（如回退），其余步骤是只读状态标识。
正确做法是：用 <ol></ol>（有序列表）表达线性流程，每项用 <li>，当前步加 aria-current="step"，已完成步用 data-status="done" 这类自定义属性（不干扰语义），未开始步保持纯文本或禁用状态。
- 必须用
<ol></ol>，不用<ul></ul>—— 流程有明确顺序，<ol></ol>的序号语义天然匹配 - 禁止给非当前步的
<a></a>加href；若需回退，只给上一步加可点击链接，并设tabindex="0" -
aria-current="step"是 WAI-ARIA 标准写法，读屏器识别为“当前步骤”，比 class="active" 更可靠
aria-current="step" 怎么用才不出错
这个属性不是 CSS 类，不能靠 JS 动态加了就完事。它必须和 DOM 结构、焦点管理、键盘操作联动，否则会破坏可访问性。
立即学习“前端免费学习笔记（深入）”；
典型错误现象：键盘 Tab 到某一步时，焦点在文字上但无法触发操作；读屏器读“步骤2，当前步骤”，但用户按 Enter 没反应。
- 只加在当前步的容器上，比如
<li aria-current="step">填写信息</li>，不要加在<a></a>或<span></span>上 - 如果当前步本身是可操作的（如表单页），确保该
<li>内部有可聚焦元素（如<input>或带tabindex="0"的按钮） - 切换步骤时，JS 必须同时移除旧的
aria-current、添加新的，并调用element.focus()把焦点移到新步骤容器，否则键盘用户会迷失
横向流程条的 CSS 布局怎么避坑
横向排列看似简单，但用 display: flex 时容易忽略基线对齐、文字截断、小屏折行等问题。
关键点不是“怎么排成一行”，而是“怎么让每步在不同宽度下都可读、可操作、不重叠”。
- 别用
white-space: nowrap强制不换行——移动端会横向溢出，应设flex-wrap: wrap+ 媒体查询控制每行最多显示几步 - 步骤之间用
gap而非margin-right，避免末项多出空白；IE11 不支持gap时，用margin-inline-end替代（比margin-right更安全） - 步骤文字过长时，用
text-overflow: ellipsis+min-width保底线，但必须搭配title属性或aria-label提供完整文本
流程状态样式怎么写才兼顾视觉与语义
仅靠颜色区分“未开始/进行中/已完成”不可靠（色盲用户无法识别），必须叠加形状、图标、文字提示三重信号。
很多人只写 .step-done { color: green; }，这等于没做可访问性。
- 已完成步建议加 SVG 对勾图标（
<svg><path d="..."></path></svg>），并设aria-hidden="true"避免读屏重复播报 - 当前步除了高亮色块，必须有明显焦点环（
outline或box-shadow），且不能被outline: none覆盖 - 未开始步用
opacity: 0.5+pointer-events: none，但必须保留文字可读性，不能仅靠灰度判断状态
最易被忽略的是：流程条一旦嵌入表单页，就必须响应表单验证状态。比如“填写信息”步里某个必填字段为空，该步的状态就不能标记为 done，哪怕用户点了“下一步”。状态同步必须由业务逻辑驱动，而不是单纯看 URL 或步骤索引。
