无障碍表单中required字段需兼顾视觉与听觉可访问性：label末尾添加“*必填”文字并确保其为语义内容，同时设aria-required="true"、正确绑定label、避免依赖placeholder，并用aria-invalid和aria-describedby同步错误反馈。
在无障碍表单中，required 字段不能只靠星号（*）或颜色区分，必须同时满足视觉用户和屏幕阅读器用户的理解需求——既要清晰可见，又要被正确朗读。
视觉提示需明确且一致
仅用红色边框或小星号不够：色觉障碍用户可能无法识别颜色，而孤立的 * 符号若未与标签关联，视觉浏览时易被忽略。推荐做法：
- 在 label 文本末尾 添加统一符号（如“* 必填”），并确保该文字是 label 的一部分（非纯 CSS 伪元素生成）
- 避免仅用 color 或 icon 传递必填信息；如需图标，配合可访问文本（例如
<span aria-hidden="true">*</span><span class="sr-only">必填</span>） - 错误状态时，除高亮外，应在输入框附近提供具体文字提示（如“邮箱地址为必填项”），而非仅显示“请填写”
屏幕阅读器需主动播报必填状态
仅靠 required 属性不足以保证所有屏幕阅读器稳定朗读“必填”。增强兼容性的关键操作：
- 为
<input 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 的无障碍不是加个属性就结束，而是视觉线索、语义标记、交互反馈三者必须对齐。
