表单无障碍与可用性关键在 label 关联、校验反馈、输入控制及状态管理：显式绑定 label 与 input，手动处理 required 校验并设自定义错误文案，type=”number” 值仍为字符串需转换，禁用按钮须用 aria-disabled 并恢复状态。
label 标签没包住输入框，屏幕阅读器直接“看不见”
用户点不到、读不出、无障碍测试挂掉——根本原因常是 label 和 input 没建立正确关联。不是加了 label 就万事大吉。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用显式绑定：
<label for="username">用户名</label><input id="username" name="username">，for值必须和input的id完全一致（注意大小写、空格） - 避免隐式包裹写法出错：
<label>邮箱<input name="email"></label>看似省事，但若内部有换行、注释或动态插入内容，容易断开 dom 结构，导致关联失效 - 别用
aria-label或title替代label：它们不能触发点击聚焦，也不能被所有读屏软件稳定识别
required 属性没配 Error message，浏览器校验形同虚设
加了 required 却没处理校验失败时的反馈，用户提交后只看到原生英文提示（如 “Please fill out this field”），或者干脆无反应——这不算可用性，是甩锅。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
:valid/:invalid+:user-invalid控制样式，比如红框、图标变化，但注意:user-invalid才是用户真实输错后的状态，比单纯:invalid更准 - 手动调用
checkValidity()并配合setCustomValidity()定制错误文案，例如：input.setCustomValidity("手机号格式不对")，再调一次checkValidity()触发显示 - 不要依赖
oninvalid事件做 UI 提示：它在表单提交时才触发，无法覆盖实时校验场景；且不同浏览器触发时机不一致
type=”number” 在移动端唤起数字键盘，但值其实是字符串
以为用了 type="number" 就能自动转数字、防字母输入？错。它的值始终是 String，而且会允许粘贴非数字字符（如 “12.3abc”），甚至允许输入 “e” 和 “-” 导致解析失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 提交前必须手动转换：
const num = parseFloat(input.value) || 0，别信input.valueAsNumber—— 它在非法输入时返回NaN，且 IE 不支持 - 需要严格限制输入内容时，用
inputmode="numeric"+pattern="[0-9]*"组合，比纯type="number"在 ios 上更可控 - 慎用
min/max：它们只影响校验逻辑，不影响输入行为；用户仍可输入超限值，直到提交才报错
submit 按钮 disabled 后没恢复，用户反复点没反应
为防重复提交把按钮设成 disabled，结果请求失败或页面跳转异常，按钮一直灰着——用户以为卡死，只能刷新重来。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用按钮必须配明确状态管理：发起请求前
button.disabled = true，无论成功失败，都得在finally块里设回false - 别只靠 CSS 隐藏 loading 状态：用
aria-busy="true"告诉辅助技术“正在处理”，否则读屏用户不知道发生了什么 - 禁用期间保留键盘焦点能力：
button被disabled后会丢失焦点，建议改用aria-disabled="true"+ CSS 禁用样式，保持可聚焦、可读取
表单可用性最麻烦的不是写法多难，而是每个交互节点都要同时照顾视觉、键盘、读屏、网络异常、输入法、移动端软键盘……漏掉任意一环，对某类用户就是不可用。