aria-required仅用于语义提示，必须配合可编辑元素或原生表单控件使用，不触发校验；与required混用时以required为准，框架中应仅在必填时渲染该属性。
aria-required 只能用在可编辑元素上
aria-required 是一个 ARIA 属性，用于向辅助技术（如屏幕阅读器）声明某个表单控件是必填项，但它**不会触发浏览器原生的必填校验逻辑**，也不会阻止表单提交。它只起语义提示作用，且仅对某些可编辑角色（role="textbox"、role="combobox" 等）或原生表单控件（如 input、select、textarea）有效。
常见错误是给 div 或 span 加 aria-required="true" 却没设 role，结果屏幕阅读器完全忽略——因为这些元素默认不可编辑、无交互语义。
- ✅ 正确用法：
<input type="text" aria-required="true">或<div role="textbox" aria-required="true" contenteditable> <li>❌ 无效写法：<code><div aria-required="true">姓名</div>（缺少role和可编辑能力） - ⚠️ 注意：若同时用了原生
required属性（如<input required>），aria-required就是冗余的，可省略 - 现代项目（Chrome/Firefox/Safari/Edge ≥ 79）：优先用
required，无需额外加aria-required - 需支持 IE11 的场景：保留
aria-required="true"，并用 JS 拦截提交、手动检查值是否为空 - 动态表单中 JS 创建的控件：如果没同步设置
required，至少得补aria-required="true"+role，否则残障用户无法获知必填要求 - 视觉用户依赖 placeholder 或旁边星号（
*）识别必填，aria-required对他们无感 - 屏幕阅读器用户听到 “编辑框，必填” 提示，但若页面没做 JS 校验，他们仍可能提交空值
- 正确做法：用
required（或 JS 校验）保证功能，用aria-required做语义增强（仅当必要时） - React 推荐写法：
{isRequired && 'aria-required="true"'}或使用展开对象：{...isRequired ? { 'aria-required': 'true' } : {}} - Vue 模板中避免：
:aria-required="isRequired"（会输出 false 字符串），改用v-bind:[`aria-required`]="isRequired ? 'true' : null" - 注意 SSR 场景：服务端渲染时若
aria-required值为false，可能被解析为真实属性，破坏语义
和原生 required 属性混用时的优先级问题
当一个元素同时有 required 和 aria-required，浏览器以 required 为准：触发表单验证、显示默认错误提示、阻止提交。而 aria-required 仅补充无障碍信息流。
但存在兼容性差异：旧版 IE 不支持 required，此时若想让屏幕阅读器用户感知必填，才需手动加 aria-required="true" 并配合 JS 校验逻辑。
aria-required="true" 不等于表单校验通过
很多开发者误以为加了 aria-required="true" 就完成了“必填保障”，结果用户跳过输入直接提交，后端才发现空值——因为该属性不参与任何运行时校验。
它只是告诉辅助技术：“这个框你得填”，但填不填、填得对不对，全靠其他机制兜底。
React/Vue 中绑定 aria-required 的注意事项
在框架中动态绑定该属性时，注意布尔值处理方式。例如 React 中 aria-required={isRequired} 在 isRequired === false 时会渲染成 aria-required="false"，这反而会误导辅助技术（明确声明“非必填”）。
正确的做法是：只在必填时显式添加，非必填时完全不渲染该属性。
aria-required 当成校验开关，却没配 JS 校验或原生 required；或者在框架里错误地恒定渲染该属性，导致“非必填项”被读作“必填”。
