aria-required不能替代原生required属性，它仅向辅助技术传达必填语义，不触发浏览器验证或阻止提交；必须配合required使用才能实现完整必填功能。
aria-required不能替代原生required属性
aria-required 是 ARIA 属性，仅用于向辅助技术（如屏幕阅读器）传达“该字段逻辑上为必填”，它**不会触发浏览器的原生表单验证行为**，也不会阻止表单提交。如果你希望浏览器弹出提示、高亮错误或阻止提交，必须同时使用原生 required 属性。
常见错误现象：aria-required="true" 单独存在时，键盘用户或屏幕阅读器能听到“必填”，但用户仍可空着提交，且无视觉反馈。
- 正确做法：始终优先用
required，再加aria-required="true"（仅当需要兼容极老辅助技术或特殊动态场景） - 冗余写法：
<input aria-required="true" required>——required已隐含语义，aria-required此时纯属重复 - 例外场景：某些动态渲染的字段（如 JS 插入的
div模拟输入框），无法用原生input时，才靠aria-required+role="textbox"等组合模拟必填语义
哪些元素能用aria-required
aria-required **只允许用在可聚焦、可输入的交互元素上**，且该元素必须已通过 role 或原生语义明确其为“输入控件”。浏览器对非法位置使用会静默忽略，或报 WAI-ARIA 规范警告。
- 合法：原生
input、textarea、select；带role="combobox"/role="textbox"的div - 非法：
label、span、button、未设role的div—— 这些加了aria-required无效，且可能干扰辅助技术解析 - 注意：若用了
role="checkbox"或role="radio"，aria-required含义模糊（是否指“至少一个被选中”？），此时应改用aria-invalid+ 自定义校验逻辑
与aria-invalid配合处理校验失败
仅标 aria-required="true" 不够。用户提交空值后，需主动设置 aria-invalid="true" 并提供错误消息关联，否则屏幕阅读器无法得知校验失败。
立即学习“前端免费学习笔记（深入）”；
实操关键点：
- 错误消息元素必须有
id，且输入框通过aria-describedby="error-id"显式关联 - 不要仅靠 CSS 隐藏/显示错误文案；确保
aria-invalid值随状态实时更新（例如：空值时设"true"，填入后设"false"） - 示例：
<input id="email" required aria-describedby="email-error"> <div id="email-error" role="alert" aria-live="polite">邮箱不能为空</div>
提交后 JS 设置input.setAttribute('aria-invalid', 'true')
现代开发中更推荐的替代方案
除非维护老旧系统或非标准控件，否则应避免手动操作 aria-required。当前主流框架和浏览器对原生 required 的支持已非常完善，且更轻量、更可靠。
- Vue/React 中：直接绑定
required属性（如<input :required="isRequired">），无需额外 ARIA - 自定义组件封装时：内部用原生
input+required，对外暴露requiredprop，比模拟aria-required更安全 - 真正需要 ARIA 的地方是动态必填逻辑（例如：选中“公司客户”后，“税号”字段才变必填）——此时用
aria-required切换，并同步更新required属性和视觉样式
容易被忽略的是：aria-required 的变更不会自动触发浏览器验证重跑，你得手动调用 checkValidity() 或控制提交逻辑。
