必须用而非或，因其天然支持序号语义、无障碍访问（屏幕阅读器自动读“第1项”）及css计数器自动编号；丢失顺序语义，完全无结构，损害seo与辅助技术识别。
<ol></ol> 是唯一合理的选择，用 <div> 或 <code><ul></ul> 做水平步骤条，等于主动放弃语义、可访问性和响应式稳定性。
为什么必须用 <ol></ol> 而不是 <ul></ul> 或 <div><p>步骤有天然顺序，“第1步→第2步→第3步”不是并列关系，<code><ul></ul> 会丢失这个语义，屏幕阅读器读出来就是“列表，3项”，不带序号也不带先后；<div> 更糟，完全无结构，SEO 和辅助技术都当它不存在。而 <code><ol></ol> 浏览器默认渲染数字，且支持 counter-reset 和 ::before 自定义序号，无需 JS 插入、不卡首屏。
- 别给
<ol></ol> 设 list-style: none 后再用伪元素重画数字——这是多此一举，反而可能破坏高对比度模式下的可读性
- 如果项目要求从 0 开始或跳号（如“Step A / Step B”），用
start 属性或 CSS counter-set 控制，不要删原生序号
- 嵌套在
<nav></nav> 里加 aria-label="步骤导航"，比单独加 role="navigation" 更准确
display: flex 布局时连接线怎么画才不翻车
<ol></ol> 设 list-style: none 后再用伪元素重画数字——这是多此一举，反而可能破坏高对比度模式下的可读性start 属性或 CSS counter-set 控制，不要删原生序号<nav></nav> 里加 aria-label="步骤导航"，比单独加 role="navigation" 更准确display: flex 布局时连接线怎么画才不翻车连接线本质是前 n−1 个步骤的右侧延伸，不是每个步骤都该有线。用 ::after 加在 li:not(:last-child) 上最稳，宽度设为 calc(100% - 40px)（预留左右圆点空间），再用 transform: translateY(-50%) 垂直居中。
- 别用
border-right——缩放后虚线错位、高对比度下消失 - 别给最后一个
li写::after { display: none }，直接用:not(:last-child)选择器更干净 - 移动端切
flex-direction: column时，记得同时display: none所有连接线，否则竖排还挂着横线
状态切换只改一个 class，但 aria 属性必须同步更新
JS 切换步骤时，光加 is-active 不够。屏幕阅读器只认 aria-current="step"，且必须配 tabindex="0" 才能被键盘聚焦。漏掉任意一项，无障碍测试就挂。
- 当前步：加
aria-current="step"+tabindex="0" - 已完成步：加
aria-label="已完成：填写信息"，不能只写✓ - 未开始步：加
aria-disabled="true"+tabindex="-1"，禁用键盘进入 - 每次切换前，先用
querySelectorAll('[aria-current]')清掉旧的aria-current，再设新的——避免残留
真正难的不是让线连起来，而是让每一步的状态在 DOM、CSS、ARIA、键盘焦点四个层面始终一致。少同步一环，用户就可能卡在“看不见、点不到、读不出”的死循环里。
