必须用 fieldset + legend 划分步骤，因屏幕阅读器仅将 legend 识别为语义化组名并播报“步骤2:支付方式”，而 div+h3 无关联；fieldset 缺 legend 或为空会致 Lighthouse 报错且渲染异常；需用 aria-current="step" 显式标识当前步并聚焦首个有效字段；中间步骤按钮用 type="button"，仅最后一步用 type="submit"；动态管理 required 属性与 fieldset disabled 状态，后端须一次性接收并校验全部字段。

用 form 包一层，每步一个 fieldset + legend，别套多个 form，也别用 div 模拟步骤——否则键盘用户进不去、屏幕阅读器读不出“当前第几步”，Lighthouse 直接报错。

为什么必须用 fieldset + legend 划分步骤

屏幕阅读器只把 legend 当作该组控件的可访问名称，会明确播报“步骤 2:支付方式”；换成 div + h3，它只会读成“标题，级别 3”，和下面的输入框毫无语义关联。

• fieldset 没配 legend，或 legend 为空/只含图标 → 浏览器可能渲染异常，Lighthouse 报“fieldset 缺少 legend”
• 视觉上不想显示 legend？用 position: absolute; clip: rect(1px, 1px, 1px, 1px); 隐藏，别用 display: none
• 所有按钮（包括“下一步”）必须放在当前 fieldset 内部，否则 Tab 键会跳过整步

怎么让屏幕阅读器和键盘用户知道“现在在哪一步”

仅靠 CSS 控制 display: none/block 不行——读屏软件根本感知不到切换。必须显式声明状态。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 每次切换时，给当前 fieldset 加 aria-current="step"，同时移除其他 fieldset 上的该属性
• 立刻把焦点移到当前步第一个可聚焦元素：document.querySelector('[aria-current="step"] input:not([type="hidden"]):not([disabled]):first-of-type').focus()
• 如果首个字段是 type="hidden" 或 disabled，得手动找下一个有效字段，否则键盘用户卡在上一步末尾

中间步骤的按钮类型和校验怎么设才不翻车

点“下一步”触发 submit 事件，浏览器默认提交整个表单并刷新页面——你写的 JS 步骤逻辑全清空。

• 中间步骤一律用 type="button"；仅最后一步的“提交”按钮用 type="submit"
• 别写 onsubmit="return false"，改用 JS 中 event.preventDefault() 精细控制
• required 属性会校验所有带该属性的字段，不管是否可见 → 切到第 2 步前，动态移除第 3 步字段的 required，或用 JS 手动调用 checkValidity() 只校验当前步字段
• 后端接收时别信前端传的 step=2，所有字段应一次 POST 完整提交，按完整 schema 校验

真正容易被忽略的是：禁用非当前步的 fieldset 时，得加 disabled 属性，否则键盘用户仍能 Tab 进去；但加了 disabled，里面字段的值就不会随表单提交——所以后端必须一次性收全字段，不能依赖前端分步传参。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！