标签不适合多步骤表单进度追踪，因其语义错误、无障碍失效、样式不一致；应使用+aria-current="step"实现语义化、可访问的步骤指示。
多步骤表单的进度追踪器不能用 <progress></progress> 标签实现——它语义错误、无障碍失效、样式不可靠，且无法表达“第几步 / 共几步”的逻辑。
为什么 <progress></progress> 不适合做步骤指示器
它只描述「已完成任务的百分比」，比如上传完成 73%，而不是「当前在第二步，共四步」。浏览器会把它读作“进度 73%”，屏幕阅读器完全无法传达步骤上下文。硬塞 value="2" max="4" 会导致语义混淆，WCAG 检查直接报错。更实际的问题是：Chrome 渲染为蓝色粗条，Firefox 是绿色细条，Safari 几乎看不见，连基础视觉一致性都保不住。
用 <ol></ol> + aria-current="step" 才是正确结构
这是 WCAG 明确推荐的语义化方案，既支持键盘导航（Tab 可逐项移动），也保证读屏软件准确播报“步骤 2：验证邮箱”。关键点不是“好看”，而是可访问性与 DOM 状态同步。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 每个步骤必须是
<li>，包裹在<ol class="stepper"></ol>内，不能用<div> 或 <code><ul></ul> - 当前步骤的
<li>加aria-current="step"，其他不加——JS 切换时只改这个属性，不要重写整个<ol></ol> - 序号用 CSS
counter-reset和::before生成，避免硬编码数字；移动端确保触控目标 ≥ 44×44px - 连线别用
border-left，第一个步骤会多出一根线；推荐用绝对定位伪元素或 flex gap 控制间距 - 用
document.querySelector('[aria-current="step"]')找当前项，.removeAttribute('aria-current') - 用
steps[stepIndex].setAttribute('aria-current', 'step')设新项 - 如果步骤可点击，确保用
<button></button>或带role="button"的元素，并处理Enter/Space键响应 - 禁用非当前步的
input（disabled），比单纯display: none更安全——防止键盘 Tab 跳过整步或误提交 - 用
background-image给步骤点填色？多数浏览器忽略，得走::before+background-color或linear-gradient+clip-path - 给
[aria-current="step"]::before忘了单独写背景色和图标，结果“当前步”看起来和普通步没区别 - 连线用
flex+calc()布局？移动端缩放时容易出现 1px 错位，改用grid+gap更稳
步骤切换时 JS 只更新状态，不重建 DOM
每次跳步，只需移除旧的 aria-current="step"，加到新的 <li> 上。别用 innerHTML 替换整个 <ol></ol> —— 这会销毁事件监听器（比如点击跳步按钮失灵），还会让浏览器丢掉原生计数缓存，长列表滚动卡顿。
进度条样式容易踩的三个坑
视觉上最常翻车的地方，和代码无关，纯属 CSS 实现细节没抠准：
真正难的不是画出漂亮进度条，而是让每一步在键盘、屏幕阅读器、缩放、触控下都行为一致——这些细节一旦漏掉，用户可能根本不知道自己卡在哪一步。
