原生 配合正确关联的 是高可访问性起点；禁用 aria 替代 label，确保语义、键盘交互与屏幕阅读器支持；校验错误需用 role="alert" 实时播报；提交必须用 内 type="submit" 按钮。
原生 <input type="email"> + 正确绑定的 <label></label> 就是高可访问性的起点，额外加 ARIA 或自定义封装反而容易破坏它。
必须用 <label></label> 包裹或显式关联 <input type="email">
屏幕阅读器不会自动把“邮箱”文字和输入框连起来，除非你用对方式：
-
<label></label>标签包裹整个输入：<label>邮箱地址<input type="email" name="email"></label> - 或者用
for和id显式配对：<label for="sub-email">邮箱地址</label><input id="sub-email" type="email" name="email"> - 禁用
aria-label或aria-labelledby替代<label></label>——这是兜底手段，不是首选；漏掉<label></label>会导致点击文字无法聚焦、键盘 Tab 顺序错乱、读屏播报不完整
type="email" 不只是校验，更是语义和行为承诺
它不只是让浏览器弹出“邮箱格式错误”，还决定了：
- 移动设备软键盘自动切换为带 @ 和 . 的邮箱布局（iOS/Android 均支持）
- 原生 focus/blur、disabled、required 状态管理，无需 JS 模拟
- 与表单提交、重置、验证 API（如
checkValidity()、reportValidity()）天然集成 - 不要写
<input type="text" inputmode="email">来“假装”是邮箱——inputmode只控制键盘，不提供语义或校验
错误提示必须实时、可聚焦、与输入框强关联
校验失败时，仅靠颜色变化或悬浮 tooltip 是不可访问的：
- 错误文案必须用
<span role="alert"></span>或<div aria-live="assertive"> 包裹，并在 JS 触发校验后立即插入 DOM <li>若输入框已获得焦点，错误出现时应保持焦点在输入框上（别自动跳走），同时确保错误文案能被读屏软件捕获</li> <li>禁止把错误信息塞进 <code>title属性——它不被所有读屏器读出，且无焦点管理能力 - 示例结构：
<label for="sub-email">邮箱地址</label> <input id="sub-email" type="email" required aria-invalid="false"><span id="email-error" role="alert" aria-live="assertive"></span>
JS 中校验失败时：input.setAttribute('aria-invalid', 'true')+errorEl.textContent = '请输入有效的邮箱地址' - 用户按 Enter 键时，只有
<form></form>内的type="submit"按钮才会触发提交，否则需额外监听 keydown - 辅助技术依赖
<form></form>边界识别控件关系；脱离表单的按钮无法被读屏器识别为“该邮箱的提交操作” - 不要用
<button onclick="submitEmail()"></button>—— 它绕过表单生命周期，导致invalid事件不触发、reportValidity()失效、无障碍上下文丢失 - 正确结构：
订阅按钮必须是 <button type="submit"></button>，且与输入框同属一个 <form></form>
独立的 <div> + <code>onclick 按钮会切断表单语义链：
最易被忽略的一点：如果组件被多次复用（比如页脚 + 弹窗各一个），id 和 for 必须唯一。用静态 ID（如 id="email-subscribe"）会导致多个实例冲突，读屏器只关联到第一个。推荐运行时生成唯一 ID，或改用 label 包裹模式避开 ID 依赖。
