错误提示元素必须是input的下一个同级元素，不可嵌入label或置于表单末尾；须预置dom中、用textcontent更新、同步设置aria-invalid与aria-describedby并确保id存在。
错误提示元素必须紧贴input之后作为兄弟节点
DOM结构上，error容器不能塞进label里，也不能挂在表单末尾或父容器底部——它得是<input>的**下一个同级元素**。这是唯一能同时满足视觉动线、可访问性播报和CSS布局稳定的方案。
常见错误包括：label里写<span class="error"></span>，或JS动态appendChild到form最底下。前者让屏幕阅读器把错误当label一部分读出来（比如“用户名，错误提示：不能为空”，语义混乱）；后者导致焦点切换时aria-describedby指向失效，语音反馈完全丢失。
实操建议：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- HTML中硬编码写死：
<input id="email"><div class="error" id="email-error"></div> - 避免用
display: none隐藏提示区，改用visibility: hidden; height: 0; overflow: hidden;保占位 - 每个
input配data-error-target="#email-error"，JS里用el.dataset.errorTarget精准定位，不依赖全局.error类名
aria-invalid与aria-describedby必须同步更新且目标ID存在
aria-invalid="true"只是个开关，不带内容；真正让读屏器读出错误文案的，是aria-describedby指向的那个ID对应的元素文本。两者不同步，等于只亮红灯不报站名。
典型翻车场景：input.setAttribute('aria-invalid', 'true')但忘了设aria-describedby，或者指向的#email-error在DOM里压根不存在（比如JS删了又没重建，或ID拼错成#emial-error）。
实操建议：
- 校验失败时三件事一起做：
input.setAttribute('aria-invalid', 'true')、input.setAttribute('aria-describedby', 'email-error')、document.getElementById('email-error').textContent = '邮箱格式不正确' - 校验通过时清空：
input.removeAttribute('aria-invalid')、input.removeAttribute('aria-describedby')、textContent = '' - 禁用
title或placeholder承载错误文案——它们在移动端不可见，也不被aria-describedby识别
feedback容器必须预置在初始HTML中，不能靠JS动态插入
JS校验失败后才document.createElement('div')再insertBefore，会导致页面“一抖一挤”：新节点插入触发布局重排，下方所有内容下移；更严重的是，可访问性树不会自动感知这个新生元素，aria-live或aria-describedby大概率静音。
这不是动画没写好，是DOM结构根基不稳。浏览器解析完HTML就固化了可访问性树，后续插入的节点除非手动触发更新（如重设aria-live），否则读屏器直接无视。
实操建议：
- 所有
<div class="error"></div>必须手写在HTML模板里，紧跟对应input之后 - 用
textContent而非innerHTML更新提示文字，避免XSS风险和DOM重解析 - 移动端需额外加
touch-action: none和临时pointer-events: none，防止抖动期间误触
label与input必须显式for/id关联，否则语义链断裂
屏幕阅读器不“看样式”，只读DOM关系。如果label没for="email"，或input没id="email"，辅助技术就无法建立“这个输入框叫邮箱”的映射——用户听到的只是“编辑文本”，而不是“邮箱，编辑文本”。
常见假象是：视觉上label挨着input、CSS对齐完美，但开发者工具的“可访问性树”里，input节点的accessible name字段为空。这就是语义断连。
实操建议：
- 强制用显式关联：
<label for="email">邮箱</label><input type="email" id="email"> - 避免隐式嵌套（
<label>邮箱<input></label>），旧版NVDA可能截断播报 - 检查多个input是否共用同一
id——ID重复会让for指向失效，且违反HTML规范
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
