aria-required不能替代required属性，它仅向辅助技术传达必填语义，不触发浏览器原生验证；正确做法是同时设置required和aria-required="true"（后者可省略），仅在无原生表单控件时显式使用。
aria-required 不能替代 required 属性
aria-required 是 ARIA 属性，只影响辅助技术（如屏幕阅读器）对“必填”状态的播报，**不触发浏览器原生表单验证**。用户提交时，它不会阻止空提交，也不会高亮错误。真正起校验作用的是原生 required 属性。
常见错误是只加 aria-required="true" 却漏掉 required，结果视障用户听到“必填”，但健全用户能直接提交空值，后端还得兜底——这反而造成体验割裂。
- ✅ 正确做法：同时设置
required和aria-required="true"（后者可省略，因required已隐含该语义） - ⚠️ 特殊场景才显式写
aria-required：比如用div模拟输入框（无原生表单控件），此时无法用required，只能靠aria-required="true"向辅助技术传达意图 - ❌ 禁止对非表单控件（如
span、button）滥用aria-required—— 它只对可聚焦、可输入的控件有意义
哪些元素支持 aria-required
aria-required 仅对具有输入能力且参与表单流的元素有效，典型包括：input、select、textarea、combobox、spinbutton 等角色对应的元素。
例如：input type="checkbox" 或 input type="radio" 组合中，通常不单独标 aria-required，而应确保至少一个被选中（用 aria-required 无意义，需靠逻辑校验）。
立即学习“前端免费学习笔记（深入）”；
- ✅ 支持：
<input type="text" required aria-required="true"> - ✅ 支持（自定义控件）：
<div role="textbox" aria-required="true" tabindex="0"> - ❌ 无效：
<button aria-required="true">提交</button>—— 按钮本身不可输入，此属性被忽略
aria-required="true" 还是 aria-required="false"
aria-required 是布尔属性，只接受 "true" 或 "false" 字符串值（不是布尔字面量）。省略该属性等价于 false，即默认非必填。
注意：aria-required="false" 很少需要显式声明。除非你动态切换必填状态（如条件表单），且必须向辅助技术明确告知“现在不强制填写”，否则不写更安全。
- 动态启用必填：先移除
aria-required，再设为"true"；禁用时设为"false"，不能直接移除属性（否则读作 false，但状态变更可能不被及时感知） - 不要写
aria-required=""或aria-required="1"—— 这些值无效，部分读屏会忽略或误读 - 与
required同步更新：若 JS 切换required，也应同步操作aria-required，避免语义不一致
检查是否生效的简单方法
别只靠开发者工具看属性是否存在，要验证辅助技术实际行为。最快速验证方式：
- 用 VoiceOver（macOS）或 NVDA（Windows）打开，聚焦到控件，听是否播报“必填”或“required”
- 在 Chrome DevTools 的 Accessibility 面板中，展开该节点，确认
Required字段显示为true - 提交空表单，观察是否触发浏览器原生提示（依赖
required）；若没提示，说明required缺失，aria-required再准也没用
复杂点在于：当用 JavaScript 动态渲染表单、或封装了 UI 组件库时，aria-required 容易被模板引擎遗漏或覆盖，必须在 DOM 渲染完成后手动补全或监听变更。
