必须用JavaScript显式设置aria-invalid为字符串"true"或"false"，且仅作用于表单控件本身；需配合aria-errormessage或aria-describedby指向错误提示元素，并在校验后同步更新状态。
必须用 JavaScript 显式设置 aria-invalid 为字符串 "true" 或 "false"，不能靠 HTML 初始值、CSS 类或原生校验自动触发。
aria-invalid 必须加在 input/select/textarea 上，不能加在 wrapper 或错误提示里
它只对表单控件本身有意义。加错位置，屏幕阅读器根本不会把错误和字段关联起来。
- ✅ 正确：
<input id="email" aria-invalid="false"><div id="email-error">邮箱格式不对</div> - ❌ 错误：
<div aria-invalid="true"><input id="email"></div> - ❌ 错误：
<div id="email-error" aria-invalid="true">邮箱格式不对</div>
值只能是字符串 "true"、"false"、"grammar"、"spelling"，别写布尔值或自定义字符串
aria-invalid 是 HTML 属性，不是 JS 变量，所有值都得是字符串。写错就等于没设。
- ✅
input.setAttribute('aria-invalid', 'true') - ❌
input.setAttribute('aria-invalid', true)（JS 布尔，DOM 中变成aria-invalid="true"但部分 AT 不识别） - ❌
input.setAttribute('aria-invalid', 'invalid')（无效值，AT 忽略） - ✅ 校验通过后必须设为
'false'，不能只removeAttribute('aria-invalid')——省略该属性等价于'false'，但显式设更稳妥
单独设 aria-invalid="true" 没用，必须配 aria-errormessage 或 aria-describedby
它只是个“状态开关”，不带错误内容。没配指向，读屏器只会说“无效”，不说“为什么无效”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐组合：
<input aria-invalid="true" aria-errormessage="email-error"><div id="email-error" role="alert">请输入有效邮箱</div> - ✅ 替代组合：
<input aria-invalid="true" aria-describedby="email-error">（aria-describedby更通用，但aria-errormessage专用于错误语境，优先选它） - ⚠️ 注意：
aria-errormessage的值必须严格等于错误元素的id字符串，且该元素不能display: none或aria-hidden="true"
动态校验时，每次都要同步更新 aria-invalid 和 aria-errormessage
用户改完内容、异步请求返回、切换校验规则……这些场景下，旧的 ARIA 状态极易滞留，导致读屏器播报过期错误。
- blur 或 input 触发校验时，先清状态：
input.removeAttribute('aria-invalid')或设为'false'，再根据结果重设 - 如果错误提示元素变了（比如从邮箱校验切到密码强度），要确保
aria-errormessage指向新id，否则指针失效 - 异步校验（如用户名唯一性）未完成前，别提前设
aria-invalid="true"，避免误报
最常被忽略的是：原生 :invalid 伪类和 aria-invalid 完全无关，浏览器绝不会自动同步；而 setCustomValidity("") 也不会清除 aria-invalid。这两件事必须手动做，缺一不可。
