必须用实现多步骤操作指南，因其天然支持顺序语义和计数，wcag明确推荐；每个对应一步，仅当前项加aria-current="step"；视觉样式须用css计数器和伪元素实现，禁止修改list-style-type。

不能用 <progress></progress> 标签当多步骤操作指南——它只表达百分比进度，不表达「第几步 / 共几步」的语义，屏幕阅读器会误读，键盘导航也断掉。

为什么必须用 <ol></ol> 而不是 <div> 或 <code><ul></ul>

有序列表 <ol></ol> 天然表示顺序和计数，WCAG 明确推荐用于步骤导航。用 <div> 堆点+文字，等于放弃语义；用 <code><ul></ul> 则丢失「1→2→3」的序数含义，辅助技术无法推断流程方向。

• 每个 <li> 对应一个步骤，不要拆成多个嵌套 <div> <li> <code><ol></ol> 的 start 属性可设起始编号（如 start="2"），但通常不需要，靠 aria-current 控制状态更可靠
• 别给 <ol></ol> 加 role="list"——它本来就是 list，重复声明反而干扰无障碍解析

aria-current="step" 必须加在当前项，且不能写错值

这是让屏幕阅读器说出「当前：验证邮箱」的关键。只写 aria-current 不带值，或写成 aria-current="true"、aria-current="page" 都无效——必须是 "step"。


Doc To HTML
使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。
下载
• 仅当前步骤的 <li> 加 aria-current="step"，其他项不加任何 aria-current
• 如果步骤支持点击跳转，用 <a></a> 或带 role="button" 的 <button></button>，并监听 Enter/Space 事件
• 千万别给非交互元素（比如纯文本 <span></span>）加 tabindex="0" 却不处理键盘响应，这会让键盘用户卡住

CSS 画步骤点时，别碰 list-style-type

它只能改数字样式（如 lower-alpha），没法做圆点+连线、状态色块、图标替换等现代 UI。所有视觉定制必须靠伪元素 + 计数器实现。

• 用 counter-reset: step 和 ::before { content: counter(step) } 生成动态序号，避免硬编码 1. 2.
• 连线用 position: absolute 的 ::after 画，避开流式布局干扰；第一个步骤的连线要显式隐藏（:first-child::after { display: none }）
• 为 [aria-current="step"]::before 单独写背景色、图标或阴影，否则当前步视觉反馈缺失
• 移动端触控目标至少 44×44px，小圆点太小就加 padding 或 min-width/min-height

最易被忽略的是焦点管理：步骤切换后，焦点必须落到当前步第一个可聚焦元素上，而不是靠 scrollIntoView() 滚动了事——滚动不等于获得焦点，键盘用户会直接跳到页面末尾。