无障碍表单中required字段需兼顾视觉与听觉可访问性:label末尾添加“*必填”文字并确保其为语义内容,同时设aria-required="true"、正确绑定label、避免依赖placeholder,并用aria-invalid和aria-describedby同步错误反馈。

在无障碍表单中,required 字段不能只靠星号(*)或颜色区分,必须同时满足视觉用户和屏幕阅读器用户的理解需求——既要清晰可见,又要被正确朗读。
视觉提示需明确且一致
仅用红色边框或小星号不够:色觉障碍用户可能无法识别颜色,而孤立的 * 符号若未与标签关联,视觉浏览时易被忽略。推荐做法:
- 在 label 文本末尾 添加统一符号(如“* 必填”),并确保该文字是 label 的一部分(非纯 CSS 伪元素生成)
- 避免仅用 color 或 icon 传递必填信息;如需图标,配合可访问文本(例如
必填) - 错误状态时,除高亮外,应在输入框附近提供具体文字提示(如“邮箱地址为必填项”),而非仅显示“请填写”
屏幕阅读器需主动播报必填状态
仅靠 required 属性不足以保证所有屏幕阅读器稳定朗读“必填”。增强兼容性的关键操作:
- 为
同时添加aria-required="true"(尤其对旧版 IE + JAWS 组合更可靠) - 确保 label 正确绑定:使用
for/id或将 input 包裹在 label 内,否则 screen reader 可能读不到关联文本 - 不依赖 placeholder 说明必填——它不会被大多数屏幕阅读器在聚焦时自动读出,且失去焦点即消失
错误反馈要双向同步
提交失败后,不仅要视觉标红字段,还要让屏幕阅读器感知并聚焦到首个错误项:
- 用
aria-invalid="true"标记出错字段,并配合aria-describedby指向具体的错误消息元素 - JavaScript 提交校验后,自动
focus()到第一个无效字段,并触发屏幕阅读器朗读其错误描述 - 错误消息元素需有唯一 id,且 role="alert" 或 aria-live="polite",确保动态更新时可被监听
不复杂但容易忽略:required 的无障碍不是加个属性就结束,而是视觉线索、语义标记、交互反馈三者必须对齐。










