和不能换成和，因为屏幕阅读器只将识别为该组控件的可访问名称，而仅被当作普通文本；+是原生语义组合，读屏软件会明确播报“步骤2：联系信息”，括号内为实际内容。

为什么

和

不能换成

和

因为屏幕阅读器不认

里的

是“这组控件的标题”，只当它是普通文本。而

+

是原生语义组合，读屏软件会明确播报“步骤 2：联系信息”——括号里那句就是

内容。

常见错误现象：fieldset没配legend，或legend为空、只含图标；浏览器可能渲染异常，Lighthouse直接报“fieldset缺少legend”。

• legend必须存在且非空，文字要准确表达该步意图（如“支付方式”，不是“第 3 步”）
• 视觉上不想显示legend？用position: absolute; clip: rect(1px, 1px, 1px, 1px);隐藏，别用display: none
• 所有按钮（包括“下一步”）必须放在fieldset内部，否则键盘 Tab 会跳过整步

如何让屏幕阅读器知道“当前在哪一步”

仅靠 CSS 显示/隐藏fieldset，读屏软件根本不知道哪步是当前。得靠aria-current="step"显式声明。

实操建议：

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

为什么在中间步骤会出事

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

容易踩的坑：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 没写event.preventDefault()，点了按钮直接跳转空白页或 404
• 用了type="submit"但又想阻止提交，结果校验失败后页面闪一下再恢复，体验断裂
• 按钮放在form外，导致键盘 Tab 无法顺序到达

正确做法：中间步骤一律用type="button"；仅最后一步的“提交”按钮用type="submit"，并在其click事件中不调preventDefault()。

required属性怎么用才不误伤隐藏字段

浏览器原生校验不管字段是否可见，只要form里有required，form.checkValidity()就扫全部——第 1 步点“下一步”，第 2、3 步带required的字段直接让校验失败。

解决方案只有两个，选一个坚持到底：

• 动态开关required：切到第 2 步前，给[data-step="2"] [required]设required，其余移除
• 完全不用required，改用手动校验：document.querySelectorAll('[data-step="2"] input[required], [data-step="2"] select[required]') + .checkValidity()

别信“display: none就绕过校验”——DOM 还在，校验照常发生。真正影响校验的是disabled状态，但disabled字段值不会提交，所以慎用。

最易被忽略的细节：所有input的id和对应label的for属性必须严格一致（大小写、连字符、空格都不能差），否则屏幕阅读器读不出标签名，可访问性直接归零。

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