HTML5表单需正确使用语义化属性才能提升可访问性：必须显式关联label与控件，fieldset+legend用于选项组，aria-invalid和aria-describedby须动态更新，type属性须真实匹配内容，自定义下拉须手动实现完整ARIA支持。
HTML5 表单本身不自动提升可访问性，关键在于你是否正确使用了新增的语义化属性和结构。用错 role、空 label、忽略 required 与错误提示联动，反而会让屏幕阅读器更混乱。
必须配对 label 和表单控件
这是最常被跳过的一步。HTML5 没有放宽对 label 的要求，反而让缺失它的问题更明显——比如 input type="date" 在 VoiceOver 中若无关联 label，会直接读成“日期编辑框”，毫无上下文。
- 优先用显式绑定：
- 避免仅靠视觉位置隐式包裹（
），部分旧版 NVDA 对嵌套input的支持不稳定 -
fieldset+legend必须用于一组选项（如radio或checkbox），不能只用div加 CSS 标题替代
aria-invalid 和 aria-describedby 要动态更新
静态写死 aria-invalid="true" 会导致屏幕阅读器一进页面就报错，而用户还没输入。真正的可访问验证依赖 JS 实时同步状态。
- 初始状态：控件不设
aria-invalid，错误提示元素（如）用aria-live="polite"且hidden - 校验失败时：
input添加aria-invalid="true"，并设置aria-describedby="email-error" - 校验通过后：移除
aria-invalid，清空aria-describedby，同时removeAttribute('hidden')错误提示
请输入有效的邮箱地址
type 属性要真实匹配内容，别为“看起来好看”乱用
type="tel" 不是“为了调出数字键盘”才用，它的实际价值是告诉辅助技术：“这是电话字段”，从而触发对应朗读规则（例如把 138-1234-5678 拆成“一三八、一二三四、五六七八”而非一串数字）。滥用会破坏语义。
立即学习“前端免费学习笔记（深入）”；
-
邮箱必用
type="email"：iOS 语音控制能识别“填写邮箱”，Android TalkBack 会提示“邮箱格式” - 密码仍用
type="password"，不要换成type="text"配合 JS 掩码——这会让屏幕阅读器直接读出明文 -
type="number"仅用于真正需要数值计算的场景（如金额、年龄），禁用在邮编、手机号上（它们本质是字符串，且number在 Safari 中不支持pattern）
最容易被忽略的是：所有自定义下拉（如用 div + ul 模拟的 select）必须手动实现 role="combobox"、aria-expanded、键盘导航（ArrowDown/Enter）和焦点管理。原生 select 开箱即用，别为了样式轻易替换。
