17370845950

无障碍表单中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 的无障碍不是加个属性就结束，而是视觉线索、语义标记、交互反馈三者必须对齐。