aria-errormessage需同时满足aria-invalid="true"且其值严格等于错误提示元素的唯一id，错误元素不可隐藏，JS动态更新时须同步修改ARIA属性，并为兼容性提供视觉 fallback。
aria-errormessage 必须配合 aria-invalid 和 id 引用
单独写 aria-errormessage 不会触发屏幕阅读器播报，它只是个“指针”，必须同时满足两个条件：输入控件标记 aria-invalid="true"，且 aria-errormessage 的值严格等于错误提示元素的 id。
-
aria-invalid不能是"false"或空字符串——必须显式设为"true"才激活错误流 - 错误提示元素（如
<div>或<span>）需有明确id，且该id在整个页面唯一 - 不要用
aria-labelledby或aria-describedby替代——它们不触发错误语境播报
错误提示元素不能 display: none 或 aria-hidden="true"
即使 DOM 存在、id 匹配，如果错误文案被隐藏，多数屏幕阅读器（NVDA、VoiceOver）会跳过播报。常见陷阱：
-
style="display: none"→ 屏幕阅读器完全忽略该元素 -
aria-hidden="true"→ 同样屏蔽，哪怕视觉上可见（比如用 CSS clip 实现“仅屏幕阅读器可见”时误加了它） - 正确做法：用
visibility: hidden+position: absolute+clip: rect(0 0 0 0)等无障碍友好隐藏方式，或直接控制class切换显隐
JavaScript 动态更新时要同步操作 aria-invalid 和 aria-errormessage
表单校验常在用户输入后 JS 判断并显示错误，这时容易漏掉 ARIA 属性更新：
- 只更新错误文案内容，但没把输入框的
aria-invalid从"false"改成"true" - 只改了
aria-invalid，但没确保aria-errormessage值仍指向当前有效id（比如切换校验规则后提示元素变了） - 异步校验（如用户名唯一性检查）完成前就设了
aria-invalid="true"，导致误报
示例关键片段：
立即学习“前端免费学习笔记（深入）”；
const input = document.getElementById('email');
const errorEl = document.getElementById('email-error');
// 校验失败时
input.setAttribute('aria-invalid', 'true');
input.setAttribute('aria-errormessage', 'email-error'); // 注意：值是字符串 id，不是元素引用
errorEl.textContent = '请输入有效的邮箱地址';
errorEl.classList.remove('visually-hidden'); // 确保可访问显示
不支持所有浏览器+读屏组合，需降级 fallback
aria-errormessage 在 Chrome + NVDA、Safari + VoiceOver（macOS 13+）中表现较稳，但在 Firefox + NVDA 或旧版 JAWS 中可能静默。实际项目中不能只依赖它：
- 始终保留视觉错误文案（颜色、图标、位置靠近输入框）
- 确保错误文案在 DOM 中紧邻或逻辑上关联输入框（如用
aria-describedby指向同一元素，作为辅助通道） - 避免仅靠
aria-errormessage传递关键信息（比如“密码强度不足”这种需用户理解的内容，必须视觉可见）
最易被忽略的是：当多个校验规则共存（如格式错 + 必填空），动态切换 aria-errormessage 指向不同 id 时，旧提示残留或未及时清除 aria-invalid，会导致读屏重复/错报。
