不能直接用作注册流程——它仅提供编号语义，无状态管理、校验或DOM切换能力；必须配合容器、分步控制、aria-hidden/tabindex同步及校验先行逻辑才能实现可访问的多步表单。
<ol></ol> 不能直接当注册流程用——它只管编号语义，不处理状态、校验或 DOM 切换。硬塞步骤进去，用户能跳过验证、键盘焦点乱入、屏幕阅读器读错顺序，后端收到的还是无效数据。
为什么<ol></ol>单独撑不起注册流程
浏览器和辅助技术把 <ol></ol> 当作静态内容流：它没有 currentStep 状态，不会拦截点击，也不响应表单字段变化。常见错误是写成这样：
<ol> <li>输入邮箱</li> <li>设置密码</li> <li>确认信息</li> </ol>
问题立刻暴露：
- 用户点“下一步”按钮时，
<ol></ol>完全无感，校验逻辑得额外补 JS - 用 CSS 隐藏非当前项（比如
display: none），但没同步设aria-hidden="true"和tabindex="-1"，键盘用户仍会卡在不可见区域 - 搜索引擎和屏幕阅读器只看到“1. 输入邮箱；2. 设置密码”，却不知道哪步已完成、哪步被跳过
真正该用的 HTML 结构组合
视觉上用 <ol class="steps"></ol> 展示进度条，但整个流程必须由外层容器驱动：
立即学习“前端免费学习笔记（深入）”；
- 外层用
<div class="wizard"> 包住全部逻辑，禁用原生表单提交 <li>步骤条里的每个 <code><li>加data-step="1"，仅作视觉映射，不绑事件 - 每步内容用独立
<section data-step="1" aria-hidden="false"></section>，显隐靠 JS 控制aria-hidden和tabindex - 所有按钮统一用
type="button"，仅最后一步的提交按钮保留type="submit"并配event.preventDefault() -
validateStep1()只检查email字段是否符合required和type="email"，不碰密码字段 -
validateStep2()只校验password和confirm_password是否匹配、长度是否 ≥8 - 切换前调用
if (currentStep === 1 && validateStep1()) { updateStep(2); }，其中updateStep()负责更新data-step类、aria-hidden和焦点管理 -
<section data-step="2"></section>显隐切换时，必须同步更新aria-hidden和tabindex，不能只靠 CSS - 焦点必须手动移到新步骤的首个可聚焦元素（比如第一个
<input>），否则键盘用户会停在空白处 - 步骤条里当前项要加
aria-current="step"，让屏幕阅读器明确告知“你现在在第二步” - 如果某步校验失败，错误消息得用
aria-live="polite"区域动态播报，不能只靠颜色或图标提示
validateStep1() 怎么和 currentStep 绑定
核心是「校验先行，状态后置」：每次点击按钮，先运行对应步骤的校验函数，只在校验返回 true 时才更新状态并切换 DOM：
漏掉这层校验拦截，用户就能跳过邮箱验证直接进第二步——步骤条显示“已完成”，实际数据根本无效。
最容易被忽略的可访问性细节
不是加了 <ol></ol> 就算完成可访问性。真实场景中，这几个点常被跳过：
