必须同时写 required 和 aria-required="true"，前者触发浏览器原生校验、影响键盘类型及CSS伪类，后者确保屏幕阅读器正确播报；缺一则导致校验失效或无障碍支持缺失。
必须同时写 required 和 aria-required="true"，缺一不可——前者管浏览器校验，后者管屏幕阅读器播报，各自失效就等于没标。
为什么只写 aria-required="true" 会出问题
它对浏览器完全“失声”：空着提交照样过，不弹提示，不拦表单，移动端键盘也不会自动切到 email 模式。只靠它，等于告诉读屏软件“这得填”，却不管用户实际能不能绕过去。
- 常见错误现象：
aria-required="true"单独存在时，NVDA 或 VoiceOver 能读出“必填”，但用户点提交后直接跳转，毫无拦截 - 老版 JAWS + IE 组合可能根本忽略纯
required，所以aria-required="true"是兜底，不是可选项 - 写了
aria-required="false"又带required？逻辑冲突，部分读屏会跳过整个字段甚至报错
required 和 aria-required 必须共存的实操写法
最稳妥的写法就是并列出现在同一个 input、textarea 或 select 标签上：
<input id="name" name="name" required aria-required="true">
-
required触发原生校验、影响键盘类型（比如type="email"唤出 @ 键）、支持:requiredCSS 伪类 -
aria-required="true"必须加在最终渲染的可聚焦输入元素上，不能挂在label或div上——那些位置加了也无效 - 自定义组件（如 React 的
MyInput）里，requiredprop 往往只透传给外层容器，aria-required="true"极易被漏掉；检查方法：打开 DevTools → 找到真实input标签 → 确认两个属性都在
视觉星号和可访问性怎么真正对齐
label:required::after 不生效，是因为 required 在 input 上，不在 label 上。想让星号稳定出现又可读，得换思路：
立即学习“前端免费学习笔记（深入）”；
- 用
label:has(input:required)::after（Chrome/Firefox 支持，Safari 15.4+ 才行），内容写成" *"（前面留空格，避免粘连文字） - 更兼容的做法：给
label加 class，比如<label class="required">姓名</label>，再配 CSS.required::after { content: " *"; } - 伪元素生成的星号对屏幕阅读器不可读，所以必须确保：要么星号是真实文本节点（如
<label>姓名*</label>），要么用aria-label补充，例如<label aria-label="姓名，必填">姓名</label> - 高对比度模式下，别只靠红色——星号要够大、位置固定（中文习惯后置），且不能仅靠颜色区分
动态切换必填状态时最容易漏掉什么
JS 控制 input.required = true 时，很多人忘了同步操作 aria-required 和视觉标识：
- 只改 JS 变量或 class，没调
input.setAttribute('aria-required', 'true')→ 读屏听不到变化 - 只加
aria-required="true"，没设input.required = true→ 浏览器不校验，空值照常提交 - label 里的星号是 DOM 节点还是伪元素？如果是后者，JS 切换时得手动增删 class，否则视觉和语义脱节
- 错误消息关联必须实时更新：
aria-invalid="true"、aria-describedby="error-id"、错误文案的role="alert"缺一不可，且三者状态要严格同步
复杂点在于：视觉提示、DOM 属性、辅助技术播报、浏览器行为，四者必须同频更新。漏掉任意一环，对某类用户来说，这个“必填”就等于不存在。
