aria-required必须与required共存，仅aria-required="true"不触发浏览器校验，只向屏幕阅读器传达语义；正确写法为，二者缺一不可，且仅对可输入控件有效。

aria-required必须和required一起用，不能单独存在

只写 aria-required="true" 不会阻止表单提交，也不会触发浏览器校验——它只对屏幕阅读器“说话”。用户空着点提交，照样能过，后端还得兜底。真正起作用的是 required 属性。

正确写法是两者共存：<input type="text" required aria-required="true">。现代读屏基本能从 required 推断必填语义，aria-required="true" 是为老版本 JAWS/NVDA + IE 或旧 Safari 做兼容兜底，不是可选项，而是必要补充。

• 漏掉 required：视障用户听到“必填”，但健全用户可绕过校验提交空值
• 漏掉 aria-required="true"：部分辅助技术（尤其旧组合）可能不播报“必填”，造成信息缺失
• 写了 aria-required="false" 又带 required：逻辑冲突，某些读屏会跳过整个字段甚至报错

哪些元素上写aria-required才有效

aria-required 只对可聚焦、可输入的控件有意义，浏览器会对非法位置静默忽略。

✅ 支持的元素包括：<input>（除 type="hidden"、"button"、"range" 等无空值语义的类型）、<textarea></textarea>、<select></select>，以及带 role="textbox"、role="combobox" 的自定义容器。

❌ 无效场景：<label></label>、<span></span>、<button></button> 上加 aria-required —— 它们本身不可输入，属性被忽略，还可能干扰辅助技术解析。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• input type="checkbox" 单独标 aria-required 意义不大；应确保至少一个被选中，靠逻辑校验而非 ARIA
• 用 div 模拟输入框时，必须同时设 role="textbox" 和 tabindex="0"，再加 aria-required="true"
• React/Vue 封装组件里，required prop 往往没透传到内部 input，aria-required 更容易被彻底漏掉

动态切换必填状态时怎么更新aria-required

JS 控制必填开关时，aria-required 必须和 required 同步更新。不能只改 JS 变量或只操作一个属性。

启用必填：input.setAttribute('required', '') + input.setAttribute('aria-required', 'true')
禁用必填：input.removeAttribute('required') + input.setAttribute('aria-required', 'false')

• 禁用时不要直接 removeAttribute('aria-required') —— 省略该属性等价于 false，但状态变更可能不被读屏及时感知
• 禁止写 aria-required="" 或 aria-required="1"，这些值无效，部分读屏会误读或跳过
• 切换后建议手动调 input.focus() 再 blur，帮助读屏重新宣告状态

怎么验证aria-required是否生效

最可靠的方法是打开 DevTools → Elements 面板 → 找到最终渲染的 input 或 textarea 标签 → 确认 required 和 aria-required="true" 同时存在。

视觉星号（如 label:has(input:required)::after）只是辅助提示，对屏幕阅读器不可读。真要兼顾可访问性，要么把星号写成 DOM 文本节点（如 <label>姓名*</label>），要么用 aria-label 补充，例如 <label aria-label="姓名，必填">姓名</label>。

高对比度模式下，别只靠颜色区分；星号必须有足够对比度、位置稳定（中文习惯后置），且不能仅靠颜色传达必填含义。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！