关键在于正确使用label、input、fieldset、legend四个原生元素：label与input须通过for/id严格绑定；fieldset+legend是唯一可靠分组方案；aria-invalid需配合aria-describedby和焦点管理；type与autocomplete必须匹配语义。

做不到“彻底规避”，但能避开所有已知、可预防的硬伤——关键不是加多少ARIA，而是把label、input、fieldset、legend这四个原生元素用对。

label 和 input 的 for/id 关联为什么必须写死？

不写或写错，屏幕阅读器就无法把“邮箱”和那个输入框绑定起来。用户听到的是“编辑框”，而不是“邮箱地址，编辑框”。这不是体验差，是信息丢失。

• for值必须和input的id完全一致，大小写、空格、连字符都不能错
• 避免包裹式写法<label>姓名<input></label>：部分旧浏览器、自动化测试工具、某些屏幕阅读器组合会失效
• 多个复选框/单选按钮共用一个name时，每个input仍需独立id，且每个对应label的for指向它
• 别用aria-label替代label：它会覆盖视觉文本，导致明眼人和视障用户看到/听到的内容不一致

为什么 fieldset + legend 是分组唯一靠谱方案？

用<div class="section">或<code><h3></h3>模拟分组，对辅助技术来说等于没分组。屏幕阅读器不会知道“下面这三个复选框是一组兴趣爱好”，也无法快捷跳转到该组。

• <fieldset></fieldset>自带语义：读作“兴趣爱好组”，然后依次读出每个带label的控件
• <legend></legend>内容必须存在，不能为空，也不能仅靠CSS隐藏（display: none会让它彻底消失）
• 多步骤表单中，非当前步的<fieldset disabled></fieldset>比JS遍历禁用每个input更轻量、更可靠
• 移动端竖屏下，<legend></legend>天然支持折叠/展开交互，无需额外JS

aria-invalid 和错误提示怎么才算真正生效？

只改边框颜色、只弹Toast、只在表单底部堆错误列表——这些对屏幕阅读器用户无效。他们需要知道“哪个字段错了”“为什么错”“怎么改”，且焦点要立刻到位。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• JS校验失败后，必须同步设置aria-invalid="true"，并用aria-describedby指向具体错误文案ID
• 错误文案要用<span id="email-error"></span>等真实元素承载，不能只是JS插入的纯文本
• 调用input.focus()前，确保目标input已渲染、未被display: none或visibility: hidden截断（iOS VoiceOver对此极其严格）
• 错误信息必须文字明确：“域名缺少@符号”，而非“格式错误”

autocomplete 和 input type 配错会直接废掉输入体验

用type="text"扛所有字段，等于放弃浏览器原生能力。iOS键盘不弹@、Chrome拒绝保存密码、数字键盘不出现在手机号输入框——全是连锁反应。

• 邮箱必须type="email" + autocomplete="email"，否则iOS不触发@快捷键
• 登录密码用type="password" + autocomplete="current-password"；注册新密码用autocomplete="new-password"
• 手机号用type="tel"，地址用autocomplete="street-address"、autocomplete="country"等标准值
• placeholder只是补充提示，不能替代label；输入后消失，对认知障碍或临时分心用户极不友好

最容易被忽略的，是结构定型后再加JS验证或动效，根本救不回语义缺陷。比如label没关联，再漂亮的实时校验动画也白搭——屏幕阅读器依然不知道你在填什么。