required和aria-required必须同时写在input等原生表单控件上：required触发浏览器校验、影响键盘类型及CSS伪类，aria-required="true"确保屏幕阅读器播报“必填”，缺一不可且不可写在label或div上。

required 和 aria-required 必须同时写在 input 上

只加 aria-required="true" 不会阻止空提交，浏览器完全无视它；只加 required 则老版 JAWS 或某些 IE 组合可能不播报“必填”。二者缺一不可，且必须落在同一个原生表单控件上。

• required 触发原生校验、影响移动端键盘类型（如 type="email" 唤出 @ 键）、支持 :required CSS 伪类
• aria-required="true" 是给屏幕阅读器听的，确保 NVDA/VoiceOver 明确朗读“必填”二字
• 写法示例：<input type="text" name="name" required aria-required="true">
• 不能写在 label 或外层 div 上——那些位置加了也无效

自定义组件里 aria-required 极易漏传

React/Vue 封装的 MyInput 组件中，required prop 往往只透传给容器，aria-required="true" 更常被彻底忽略，尤其当组件用 div 包裹或改用 role="textbox" 时。

• 检查方法：打开 Chrome DevTools → Elements 面板 → 找到最终渲染的 input 标签 → 确认两个属性都在
• 若用 role="textbox" 模拟输入框，则 required 不合法，此时必须显式写 aria-required="true" 并确保 tabindex="0"
• 禁止对 button、span、未设 role 的 div 添加 aria-required——浏览器静默忽略，还可能干扰读屏解析

动态切换必填状态时，DOM 属性必须同步更新

JS 控制 input.required = true 时，很多人只改了这个，却忘了同步操作 aria-required 和视觉标识（如星号），导致读屏状态滞后或错乱。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 启用必填：先移除 aria-required 属性，再设为 "true"（不要直接赋值 element.setAttribute("aria-required", "true") 后就完事）
• 禁用必填：必须显式设为 "false"，不能直接 removeAttribute("aria-required")——否则读屏可能仍按默认 false 解析，但状态变更不被感知
• 视觉星号不能只靠 label:required::after：该伪类选不到 label，因为 required 在 input 上；更稳做法是 label:has(input:required)::after（Chrome/Firefox 支持），或直接在 label 文本末尾加 * 节点

aria-required="false" 几乎不该显式写

aria-required 是布尔属性，省略即等价于 false。显式写 aria-required="false" 只在极少数动态场景下有必要——比如条件表单中某字段从必填变为非必填，且你必须向辅助技术明确传达“现在不强制填写”。

立即学习“前端免费学习笔记（深入）”；

• 禁止和 required 共存：<input required aria-required="false"> 是逻辑冲突，部分读屏会跳过整个字段甚至报错
• 不要写 aria-required="" 或 aria-required="1"——这些值无效，NVDA/JAWS 可能误读或忽略
• 真正需要反馈校验失败时，aria-required="true" 还不够，得配合 aria-invalid="true" 和 aria-describedby 关联错误消息

实际项目中最容易被忽略的，是自定义组件内部 DOM 层级的属性穿透是否完整，以及动态切换时三个层面（功能校验、语义播报、视觉提示）是否真正同步。不是写了就算数，得去 DevTools 里亲眼确认最终渲染节点上有没有那两个属性。