如何在HTML表单校验中提供即时可访问性提示-html教程-PHP中文网

原生表单校验需手动同步dom、aria与视觉反馈；input事件中必须调用checkvalidity()触发:user-invalid和aria-invalid更新；每次校验前须先setcustomvalidity('')解除锁定，再按需设错误文案。

如何在html表单校验中提供即时可访问性提示

原生表单校验不会自动提供即时可访问性提示，必须手动同步 DOM 状态、ARIA 属性和视觉反馈，否则屏幕阅读器读不到、键盘用户看不到、自动化测试也检测不到错误。

input 事件里必须调用 `checkValidity()` 才能激活 `:user-invalid`

只监听 input 事件、只改 value 或只设 setCustomValidity()，浏览器不会更新伪类、不触发 aria-invalid 变化，更不会让读屏器感知到状态变更。

checkValidity() 是唯一能同步触发 :user-invalid、aria-invalid="true" 和 validationMessage 更新的入口
每次校验前必须先执行 input.setCustomValidity('')，否则后续 checkValidity() 永远返回 false（哪怕值已合法）
中文输入法下 input 事件在“上屏完成”后才触发，天然适配，无需额外防抖
别用 keyup：它捕获不到粘贴、拖入、右键粘贴，且在中文输入过程中频繁误触发

错误提示节点必须预置 DOM，不能动态创建

临时用 document.createElement 插入错误 div，NVDA、VoiceOver 都可能完全忽略——因为元素没进可访问性树，aria-live 也播不出。

每个 <input id="email"> 后紧跟一个预置的 <div id="email-error" class="error-feedback" role="alert" aria-live="polite"></div>
隐藏方式必须用 visibility: hidden; height: 0; overflow: hidden;，不能用 display: none（会破坏焦点流和布局稳定性）
更新文案只用 feedbackEl.textContent = errorText，禁用 innerHTML（XSS + 可访问性树不刷新）
同步设置 input.setAttribute('aria-invalid', !!errorText) 和 input.setAttribute('aria-describedby', errorText ? 'email-error' : null)

`setCustomValidity()` 的空字符串不是“重置”，而是“解除锁定”

很多人以为 setCustomValidity('') 是“清空错误”，其实它是把字段从“自定义无效态”切回“待校验态”。漏掉这步，用户输对了也永远过不了校验。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

每次 input 事件开头第一件事：先 input.setCustomValidity('')
仅在校验失败时再设非空字符串，如 input.setCustomValidity('邮箱格式不对')（注意不加句号，浏览器会自动补）
不要反复设同一文案：会导致 validationMessage 不更新，即使用户已改对
旧版 Safari（:user-invalid，需降级为手动切换 is-invalid class + aria-invalid

label 和 input 的 for/id 必须字面完全匹配

这是整个可访问性链路的起点。大小写、连字符、空格、中间注释、DOM 顺序——任何一处不一致，屏幕阅读器就认不出哪个 label 属于哪个 input。

for="user-email" 必须对应 id="user-email"，写成 id="userEmail" 或 id=" user-email " 都会断开
禁用隐式包裹：<label>邮箱<input id="email"></label> 中间一旦插入换行、注释或 JS 节点，关联即失效
<select></select> 更敏感：iOS VoiceOver 要求 label 和 select 在 DOM 中紧邻，中间插个 <p></p> 就无法聚焦
所有必填字段建议补 aria-required="true"，比仅靠 required 属性更明确传达语义