必须用 <ol> 而非 <ul> 或 <div>，因其天然支持序号语义与无障碍访问；data-status 优于 class 控制状态；移动端需断点切换竖排并隐藏连接线；当前步骤须设 aria-current="step" 和 tabindex="0"。
直接用 <ol> + 语义化 class 控制状态最稳，别用 <div> 堆砌或靠 JS 拼 HTML 结构。
为什么必须用 <ol> 而不是 <ul> 或 <div>
步骤是强顺序流程，<ol> 天然携带序号语义和可访问性支持。屏幕阅读器会自动读出“第 1 项”“第 2 项”，而 <ul> 或 <div> 需手动加 aria-label 补救，且容易漏掉 aria-current="step"。用 <ol> 还能配合 CSS 的 counter-reset/counter-increment 自动编号，避免硬编码数字。
常见错误现象：
- 用
<div class="step">填写信息</div>堆叠 → 屏幕阅读器无法识别顺序，无障碍测试失败 - 用
<ul>却给每个<li>加data-step="1"→ 语义冗余，JS 控制类名时易错位 - 服务端渲染时没传当前步骤索引 → 所有步骤都显示为未开始，用户卡在第一步
data-status 比 class 更适合动态控制状态
用 data-status="pending | active | finished" 替代 class="pending"，CSS 可直接写 [data-status="finished"] .step-dot { background: #2196F3; }。这样 JS 更新只需改属性值，不碰 class 列表，避免 class 冲突或残留。
立即学习“前端免费学习笔记（深入）”；
使用场景：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 表单多步提交后，后端返回
{ current: 3, completed: [1,2] }→ 前端批量设置data-status - 路由变化触发步骤跳转（如 /step/3）→ 直接解析 URL 参数设
data-status - 需要灰掉未激活步骤的点击事件 →
[data-status="pending"]:not([data-status="active"]) { pointer-events: none; }
注意：别用 data-step="3" 这种纯数字，后期加“跳过某步”逻辑时语义断裂，data-status 更直白。
移动端竖向堆叠时连接线必须隐藏
横排步骤条在小屏上强行压缩会导致圆点重叠、连线错位，iOS Safari 对 flex-basis: 0 渲染不稳定。正确做法是断点切换布局方向并隐藏连线：
@media (max-width: 768px) {
.steps {
flex-direction: column;
align-items: flex-start;
}
.step::after {
display: none;
}
.step {
min-width: 0; /* 防止窄屏下溢出容器 */
}
}关键点：
-
.step::after是横排时画连接线的伪元素，竖排时它已无意义，必须display: none -
min-width: 0是防 Flex 子项在窄屏下撑宽父容器的必要补丁 - 竖排时不重绘连接线，靠上下间距（
margin-bottom）体现流程顺序，更轻量也更可靠
当前步骤必须加 aria-current="step" 和 tabindex="0"
仅靠视觉高亮（比如加粗文字或变色）对键盘用户和读屏软件完全无效。必须显式声明当前步骤：
<li data-status="active" aria-current="step" tabindex="0">验证身份</li>
漏掉这个，WCAG 2.1 AA 级无障碍标准直接不达标。而且：
-
aria-current="step"告诉读屏软件“这是当前所在步骤”，它会读成“验证身份，当前步骤” -
tabindex="0"让键盘用户能聚焦到该节点，按 Enter 触发下一步（如果绑了事件） - 不要用
role="button"包裹文字来模拟可点击 —— 步骤项本身不是按钮，只是状态标识
真正难的不是让圆点变色或连线延伸，而是确保每一步的状态变更既被视觉呈现，又被辅助技术准确传达。状态属性、语义标签、焦点管理这三样缺一不可，少一个就可能让部分用户彻底迷失在流程里。
